0

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

3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
  • What are you trying to achieve? Why isn't this HTML in the template of the component? – JB Nizet Aug 02 '19 at 16:48
  • I would like to append buttons to work there. in my table there is no.of button need to be added by condition and assigned with different functionals – 3gwebtrain Aug 02 '19 at 16:50
  • If you are looking for dynamic html check out this article.https://stackoverflow.com/questions/48028676/compile-dynamic-html-in-angular-4-5-something-similar-to-compile-in-angular-js – Yevgeniy.Chernobrivets Aug 02 '19 at 16:50
  • That doesn't answer my question. Why isn't this HTML in the **template** of the component? – JB Nizet Aug 02 '19 at 16:50
  • @JBNizet - I am trying to implement dynamic html there, which i receive from backend. especially button type. on button click require the different data edit, update and submit back to backend. – 3gwebtrain Aug 02 '19 at 16:52
  • 1
    You can't do that with Angular (at least really really not easily). The HTML template would have to be compiled on the fly, so you would need the Angular compiler, and the whole point of AOT compilation is to precompile templates at build time and remove the Angular compiler from the bundle. You'd better use a different design. – JB Nizet Aug 02 '19 at 16:54

0 Answers0