I have below response from api

[  
   {  
      "Cinema_strName":"dfdsfsd, Ahmedabad",
      "Cinema_strID":"HIWB",
      "Cinema_strBannerImg":"F&BCombo.jpg",
      "cinema_addr":"fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc":"<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob":0
   }
]

I want to get iframe from the api and append to div map

For that I wrote in TS file

  thismon.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }
})

html template:

<div class="map" *ngFor="let map of cinema">
     <div [innerHTML]="map.cinema_loc"></div>
 </div>

But HTML is not ming but if I bind normally that is like below

<div class="map" *ngFor="let map of cinema">
     <div>{{map?.cinema_loc}}</div>
  </div>

Iframe in showing in text format.

How can I append as html?

Please help.

AS per given solution I had tried below

 thismon.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    this.cinema = this.sanitizer.bypassSecurityTrustHtml(this.cinema);

    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }

But does'nt work. If I console.log this.cinema.cinema_loc. Getting undefined.

I have below response from api

[  
   {  
      "Cinema_strName":"dfdsfsd, Ahmedabad",
      "Cinema_strID":"HIWB",
      "Cinema_strBannerImg":"F&BCombo.jpg",
      "cinema_addr":"fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc":"<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob":0
   }
]

I want to get iframe from the api and append to div map

For that I wrote in TS file

  this.mon.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }
})

html template:

<div class="map" *ngFor="let map of cinema">
     <div [innerHTML]="map.cinema_loc"></div>
 </div>

But HTML is not ming but if I bind normally that is like below

<div class="map" *ngFor="let map of cinema">
     <div>{{map?.cinema_loc}}</div>
  </div>

Iframe in showing in text format.

How can I append as html?

Please help.

AS per given solution I had tried below

 this.mon.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    this.cinema = this.sanitizer.bypassSecurityTrustHtml(this.cinema);

    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }

But does'nt work. If I console.log this.cinema.cinema_loc. Getting undefined.

• javascript
• angular
• angular5
• ngfor

• 2 Possible duplicate of <div [innerHTML]=.... not working with iframe html> in angular2 html inject – aloisdg Commented Oct 12, 2018 at 13:12
• It doesn't work – Sagar Kodte Commented Oct 12, 2018 at 13:23
• In console getting cinema_loc undefined – Sagar Kodte Commented Oct 12, 2018 at 13:24
• Have you tried it using the null operator (?), like so: [innerHTML]="map?.cinema_loc" – JOpuckman Commented Oct 12, 2018 at 18:29
• Yes. I tried this also but not working – Sagar Kodte Commented Oct 13, 2018 at 4:54

4 Answers 4

I think this would work. First Solution is:

<ng-container *ngFor="let testString of testStrings">
<label [innerHtml]="testString"></label>
</ng-container>

and Second Solution is :

this.testString = this.sanitizer.bypassSecurityTrustHtml(this.testString);

You'll have to sanitize it as Angular is stripping it due to Security reasons:

Use this in Template:

<div class="map" *ngFor="let map of cinema">
  <div [innerHTML]="safeCinema(map.cinema_loc)"></div>
</div>

Use this in Component:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {
  name = 'Angular';

  constructor(private sanitizer: DomSanitizer) {}

  cinema = [
    {
      "Cinema_strName": "dfdsfsd, Ahmedabad",
      "Cinema_strID": "HIWB",
      "Cinema_strBannerImg": "F&BCombo.jpg",
      "cinema_addr": "fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc": "<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob": 0
    }
  ];

  safeCinema(cinemaLoc) {
    return this.sanitizer.bypassSecurityTrustHtml(cinemaLoc);
  }

}

Here's a Sample StackBlitz for your ref.

It seems like your map variable is undefined on the first pass for some reason. Try this modification to the previous answer:

<div [innerHTML]="map?.cinema_loc"></div>

Just perform following checks -

1. Anything related to dynamic html injection needs to go through DomSanitizer. That you can do through @Injecting the DomSanitizer and calling the method bypassSecurityTrustHtml.

2. Make sure iframe src you are passing is correct.

You can see demo in action here - https://stackblitz./edit/angular-ixzyza

Note: In demo link I am using https://www.w3/TR/PNG/iso_8859-1.txt as iframe src.