Angular 1.x Iframe with html content

Question

I do have html content comes from the API.
How do I display it with iframe ?

Something like { ..., template: "<h3 style="margin: 0px; padding: 0px; ..." ...}

Please provide demo if possible.

Thanks.

Hi, could you please provide more information with your question? At the current state, it's unclear what you are trying to ask. — Rushil Srivastava
– Rushil Srivastava, Commented Mar 13, 2018 at 5:54

Anas · Accepted Answer · 2018-03-13 06:01:00Z

1

Create a pipe for iframe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

And in the component

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

HTML

<iframe width="100%" height="300" [src]="url | safe"></iframe>

You can refer this Plunker

For Angular1.x Plunker

edited Mar 13, 2018 at 6:01

answered Mar 13, 2018 at 5:56

Anas

99113 silver badges29 bronze badges

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

4 Comments

Bhargav Over a year ago

Thanks, can it be same with angular 1 ?

Anas Over a year ago

@BHARGAV It is for angular 2 or higher

Bhargav Over a year ago

How can I do the same with Angular 1.x

Bhargav Over a year ago

I've seen that link before but it is not up to my expectation, as I said, It comes from the API which have array objects with JSON html.

Collectives™ on Stack Overflow

Angular 1.x Iframe with html content

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related