In AngularJS, the directive ng-include was used to include HTML content from an external file. This directive does not exist in Angular but can be accomplished using different way. This tutorial will show 2 Ways to bind HTML with Angular.
Bind HTML using innerHTML attribute
Let’s say our HTML content is within a variable called htmlTemplate. HTML binding can be done as below :
|
1 |
<div [innerHTML]="htmlTemplate"></div> |
Bind HTML programmatically
The HTML can also be done programmatically.
- app.component.html
|
1 |
<div #htmlContainer></div> |
- app.component.ts
|
1 2 3 4 5 |
@ViewChild('htmlContainer') htmlContainer: ElementRef; ngOnInit(): void { this.htmlContainer.nativeElement.innerHTML = ANTOHER_TEMPLATE; } |
The tutorial source code is available on Github. Download the source