I need to achieve dynamic variable compilation inside HTML Template using Angular 7.
Here is my sample code:
app.component.ts:
username = 'User Name';
sampleData = "This is my <strong>{{username}}</strong>";
app.component.html:
<div [innerHtml]="sampleData"></div>
But, still the output is
This is my {{username}}.
My Expected output is,
This is my UserName
The same feature can be achieved in Angular 1 using $compile. Please let me know how to achieve this in Angular 7
Try this:
username = 'User Name';
sampleData = "This is my <strong>" + this.username + "</strong>";
As per your comment, for dynamic tdata you can do this:
username = 'User Name';
sampleData = "This is my {{username}}";
ngOnInit() {
this.sampleData = this.sampleData.replace("{{username}}", `<strong> ${this.username} </strong>`)
}
ngOnInit()You can use ng-template and create a local reference of it and use it with ngTemplateOutlet wherein you can pass in the dynamic content.
HTML (template)
<ng-template #temp let-item>
<div> This is my variable <strong>{{ item }}</strong> which is dynmically parsed. </div>
</ng-template>
<ng-container *ngTemplateOutlet="temp; context: { $implicit: name }"></ng-container>
Typescript
export class AppComponent {
name = 'Angular';
}
Check the stackblitz demo - https://stackblitz.com/edit/angular-lec12u