Iframe code is converting into a dom object when binding from Angular component to HTML template

Question

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?

Please check this, https://stackoverflow.com/questions/49832358/angular-5-how-to-insert-a-string-as-a-html-element — Shantanu
– Shantanu, Commented Sep 4, 2018 at 6:27
@Shantanu thank you for the answer but it isn't the problem. — N Sharma
– N Sharma, Commented Sep 4, 2018 at 8:05

Mandana Rz · Accepted Answer · 2018-09-04 09:39:17Z

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.

answered Sep 4, 2018 at 9:39

Mandana Rz

2911 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iframe code is converting into a dom object when binding from Angular component to HTML template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related