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>

Angular CLI is a command line interface to use Angularjs. We can create any type of Angular apps easily with the help of Angular CLI.

How to start Installation?
Here we are going to use Node.js command prompt.

Start Node.js command prompt & Follow these commands in Node.js command prompt.

> npm install -g @angular/cli

for latest version :

> npm install -g @angular/cli@latest

Angular CLI makes it easy to create a new application.

> ng new hello-world
> cd hello-world

Check the version you have installed :

> ng --version

or

> ng -v

“ng –version” or “ng –v” command will show installed version details like this :

@angular-cli: 1.3.0
node: 8.2.1
@angular/common: 4.3.4

How to run our new app in a web browser
Easily start running our new app in ‘webpack-dev-server server’. It is only for development with live reload.

> ng serve

angular cli app in a web browser:

The app will automatically reload if you are changing something in any file. “http://localhost:4200” this is a default angular cli app URL. Open this URL in any browser. The app will start working.

How to change angular cli server port number or host instead of “localhost:4200”
We can configure it manually in our “angular-cli.json” file, which is locating in our project directory.

"serve": {
            "port": 5500,
            "host" : "112.168.0.100"       
}

Restart the server. It will serve in the new port or host as per update.
Example, http://112.168.0.100:5500

” Angular is running in the development mode. Call enableProdMode() to enable the production mode. ” It is a default console message.
We can update environment to production mode.
change production: false to true in environments/environment.ts

export const environment = {
	production: true
};

Project’s unit testing.
‘hello-world\src\app’ folder have app.component.spec.ts file. That file has unit test configurations.

Test Debug page :

> ng test

Create compiled and minified application :
Compiled and minified application will get generated in a new ‘dist’ directory by default. “ng serve” is not required to run “ng > build”.

> ng build

Build compiled and minified version for production :

> ng build --target=production

or

> ng build --prod

How to generate Angular components in CLI

> ng g component sample-component-name

It will generate new component folder “sample-component-name” with all related files in the src\app directory.

How to stop running node server
Node.js command prompt – Press -C twice or type ‘exit’ to stop node server.
Node.js – Press -D

"[WDS] Disconnected!"

This message will come to browser console if ‘webpack-dev-server’ is not working or stopped running server manually.