Angular [ innerHTML ] - Elements id attribute is missing in innerHTML

I was trying to fetch dynamic html data from an API for my Angular 4 project. I used Angular [innerHTML] attribute method to get fully HTML based content. But I was getting full HTML except for any elements “id” attribute. Here is the code how I fixed that problem.

This is the HTML code what I have to get as an output.

<p>
All definitions on the Technical Terms, websites are written to be technically nice but also smooth to perceive.
</p>

<p>
<span id="span1">Have you ever wondered how online businesses are works?</span> 
As a small business owner, <a href="http://www.skillblue.com" target="_blank">Skillblue digital agency</a> will help you to achieve your targets. <br>
The only thing is you should take a discussion with Skillblue company. 
<br> 
Or you can check Skillblue company's <a href="http://www.skillblue.com/faq/website-development-packages-faq/" target="_blank">profitable website development plans & instruction.</a>
</p>

This is the HTML code what I was getting as an output.

<p>
All definitions on the Technical Terms, websites are written to be technically nice but also smooth to perceive.
</p>

<p>
<span>Have you ever wondered how online businesses are works?</span> 
As a small business owner, <a href="http://www.skillblue.com" target="_blank">Skillblue digital agency</a> will help you to achieve your targets. <br>
The only thing is you should take a discussion with Skillblue company. 
<br> 
Or you can check Skillblue company's <a href="http://www.skillblue.com/pricing/website-development-packages/" target="_blank">profitable website development plans & instruction.</a>
</p>

Note: Here I’m mentioning 2 simple methods, for fixing any attribute related to [innerHTML] issues in Angular.

Method #1

Here I’m going to create a function for return Sanitized, pure HTML. Create an object myContent for assign dynamicData ( HTML data what I’ll fetch from API). Then I’ll call sameAsHtml function and pass myContent data into [innerHTML] in HTML page. Done!

page.component.ts :

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

constructor(protected html_sanitizer: DomSanitizer) {}

pageTitle = 'My page title';

sameAsHtml(html_content) {
  return this.html_sanitizer.bypassSecurityTrustHtml(html);
}

myContent = dynamicData;

page.html :

<div class="container">
 <h1 [innerHTML]="pageTitle"></h1>
 <div [innerHTML]="sameAsHtml(myContent)"></div>
</div>

Method #2

Here I’m going to assign Sanitized, full HTML into an object myContent. Then I’ll call myContent into [innerHTML] in HTML page. Done!

page.component.ts :

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

constructor(protected htmlSanitizer: DomSanitizer) {}

pageTitle = 'My page title';
myContent = this.html_sanitizer.bypassSecurityTrustHtml(dynamicData);

page.html :

<div class="container">
 <h1 [innerHTML]="pageTitle"></h1>
 <div [innerHTML]="myContent"></div>
</div>

Author
Recent Posts

Follow me

Sanju

I’m Sanjunath.S from Mumbai, India. I like web technologies, traveling & history. I have 11+ years of experience in web technologies like HTML 5, CSS 3, JavaScript, Bootstrap, and PHP.

Follow me

Angular [ innerHTML ] – Elements id attribute is missing in innerHTML

Method #1

Method #2

More from w3blog