I have created angular application.in here, i want to inject some content using [innerHTML] property like below
export class AppComponent {
name = 'Angular';
public bar = 'bars';
foo = `<div>`+this.bar+`
</div>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}
I have used this in html file like below
<div [innerHTML]="foo"></div>
But I just simply return only div element. button control is not getting rendered.
I have created a stackb sample for your reference. please provide any idea how to do it
sample - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts
Reference - Angular HTML binding
How html binding works in Angular application. using innerHtml attribute binding, We can bind html content in the form of string. innerHtml attribute can be added to html tag with below two ways. Syntax: <div [innerHTML]="variable"></div> <div innerHTML=" { {variable}}"></div>. Here is a typescript component.
The HTML entities and HTML elements are not rendered. Now, let’s consider a template that uses [innerHTML] property binding on this string: After recompiling, this code will produce the result:
to sum up, Angular innerHtml attributes provides dynamic binding of html string content and also using ngAfterViewChecked, we can bind the event listeners Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever.
Behind the scenes, [innerHTML] uses Angular’s DomSanitizer which uses a list of approved HTML elements and attributes. Note: The full list of approved HTML elements and attributes can be observed in html_sanitizer.ts. This will restrict your [innerHTML] values from using <script> and <style> tags and style attributes.
you should use DomSanitizer
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private sanitized: DomSanitizer) {}
name = 'Angular';
public bar = 'bars';
foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
</div>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
`);
}
You can change it to @ViewChild,
Change your ts
file like this,
export class AppComponent {
@ViewChild('someVar') el:ElementRef;
name = 'Angular';
public bar = 'bar';
ngAfterViewInit() {
this.el.nativeElement.innerHTML = `<div>`+this.bar+`
</div><button type="button" onclick="alert('Hello world!')">Click Me!</button>`;
}
}
Working Stackblitz https://stackblitz.com/edit/angular-vnk9ft
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With