Angular 4 innerHTML property removing id attribute
try this http://plnkr.co/edit/JfG6qGdVEqbWxV6ax3BA?p=preview
use a safeHtml
pipe with .sanitized.bypassSecurityTrustHtml
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
@Component({
selector: 'my-app',
template: `<div #div [innerHTML]="content | safeHtml"></div>1`,
})
If you are not using innerHtml at multiple places
In your TS
content = "<a href='#' id='cafeteria' class='cafeteria'>Cafeteria</a>";
newContent:any;
constructor(private sanitized: DomSanitizer) {
this.newContent = this.sanitized.bypassSecurityTrustHtml(content)
}
In your Html
<div #div [innerHTML]="newContent"></div>