0

I am working on a project based on Angular 2. I got stuck in one problem. I am dealing with Iframe. In my angular component, I am generating an Iframe as:

    this.ifrm = document.createElement("iframe");
    console.log(title_colorr);
    this.ifrm.setAttribute("src", "http://web.com/newsfeed/");
    this.ifrm.style.width = widthh + "px";;
    this.ifrm.style.height = heightt + "px";

I am getting a full Iframe code when I am putting

console.log(this.ifrm); as: 

<iframe src="http://web.com/newsfeed/" style="width: 250px; height: 250px;"></iframe>

Now the problem is when I am trying to use this in my HTML template as:

<p >{{ifrm}}</p> then I am getting :

[object HTMLIFrameElement]

I have used <p [innerHTML]="ifrm"></p> too, but no solution is there.

Is there anybody, who knows how to solve this?

N Sharma
  • 33,489
  • 95
  • 256
  • 444
  • Please check this, [https://stackoverflow.com/questions/49832358/angular-5-how-to-insert-a-string-as-a-html-element](https://stackoverflow.com/questions/49832358/angular-5-how-to-insert-a-string-as-a-html-element) – Shantanu Sep 04 '18 at 06:27
  • @Shantanu thank you for the answer but it isn't the problem. – N Sharma Sep 04 '18 at 08:05

1 Answers1

0

Import ElementRef and Renderer2 from '@angular/core' and change your constructor to

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

Now you can use appendChild function of renderer as follows:

this.renderer.appendChild(this.elementRef.nativeElement, this.ifrm);

In your html file you can just have

<p></p>

And it should work.

Mandana Rz
  • 29
  • 11