Angular uses createEmbeddedView to dynamically add new template elements

HTML source code:

<div>
    <ng-template #tpl>
      <span>What am I supposed to do</span>
    </ng-template>
    <div #container></div>
    <button (click) ="showTpl()">According to the template</button>
  </div>
Copy the code

The runtime of this source corresponds to the native HTML code:

By comparison, the Ng-template code in the HTML source code does not appear in the native HTML code at runtime:

    <ng-template #tpl>
      <span>What am I supposed to do</span>
    </ng-template>
Copy the code

ShowTpl implementation code:

  showTpl() {
    this.container.createEmbeddedView(this.tt);
  }
Copy the code

Click the button after the HTML source code:

The effect is that the span element, previously wrapped in ng-template with the name #, now appears in the HTML source code:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: