How to append HTML element from ts file

问题

I am trying to append an innerHTML with div. it takes but how to add the style and click event in the inner HTML added?

ts file:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
  testhtml = `<button type="button" (click)="submit()">Click Me!</button>`;
  columns = [
    {'name':'fruit', 'value':'Mango'},
    {'name':'flower', 'value':'Lotus'},
    {'name':'animals', 'value':'Lion'},
    {'name':'action', 'value':''}
    ]

    submit(data) {
      alert('submit works', data)
    }

    getData() {
      return `<div><button (click)="submit(item)">Submit</button></div>`
    }
}

HTML :

<table>
  <tr>
    <th *ngFor="let item of columns">{{item.name}}</th>
  </tr>
  <tr>
    <th *ngFor="let item of columns">
       <ng-container *ngIf="item.value">
        {{item.value}}
        </ng-container>
        <ng-container *ngIf="!item.value">
          <div [innerHtml]="testhtml">
          </div>
        </ng-container>
    </th>
  </tr>
</table>

LiveDemo

来源：https://stackoverflow.com/questions/57330615/how-to-append-html-element-from-ts-file