innerHTML is not working for some tags like button or custom tags [duplicate]

Answer 1

By default Angular is sanitizing potential unsafe content. You can tell Angular to trust your content

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent  {
  constructor(private sanitizer:DomSanitizer){
    this.html = sanitizer.bypassSecurityTrustHtml("<h1>Header</h1><button>Button</button>");
  }
  html;
}

StackBlitz example

See also https://stackoverflow.com/a/41089093/217408

Answer 2

innerHTML is not a attribute exposed as a property of HTML Element.

<div [innerHTML]="html"></div>

So this will not work.

You can use @ViewChild to access DOM Element

app.component.html

<div #someVar></div>

app.component.ts

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor() {}

ngAfterViewInit() {
      this.el.nativeElement.innerHTML = "some html";
}