Как динамически создать div с динамическим идентификатором в angular 4

Question

Я пытаюсь добавить div с id, используя машинописный текст, но он не присваивается. Я только получаю div

app.component.html

<div class="one" [innerHtml]="htmlToAdd">

</div>

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import * as shape from 'd3-shape';
import { ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   ngOnInit() {

    this.addDiv()

  }

  addDiv(){
     this.htmlToAdd = '<div class="two" id="myId">my div</div>';
  }

}

Answer 1

Чтобы сделать это более опасным, даже если это не может быть оптимальным решением. Вот Stackblitz

В вашем компоненте

trustedHtml: SafeHtml;

constructor(public s: DomSanitizer) {}

ngOnInit() {
    this.addDiv();
}

public addDiv() {
    this.trustedHtml = this.s.bypassSecurityTrustHtml("<div class='two' id='myId'>my div</div>")
}

и ваш HTML

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