Angular 6 从 HTMLTemplateElement 创建 HTMLElement

Question

We try to use custom elements in Angular that are created in polymer.

Our goal is to define a HTML template that is passed to a custom element. The custom element generates the HTML based on this template. Angular does not pass the HTML template correctly. It seems that angular renders HTML templates in a different way.

A simple example in plain Javascript:

https://stackblitz.com/edit/js-svh54x?file=index.js

innerHTML untouched

A simple example in Anuglar 6:

https://stackblitz.com/edit/angular-zryvwi?file=src%2Fapp%2Fapp.component.ts

Removed innerHTML

Why does angular remove the innerHTML of the HTMLTemplateElement?

Answer 1

Using

<template id="testTemplate" [innerHTML]="'<div>Test 123!!!</div>'"></template>

instead of

<template id="testTemplate">
    <div>Test 123!!!</div>
</template>

Solved my problem.