Search code examples
javascripthtmlangularcustom-element

Angular 6 create HTMLElement from HTMLTemplateElement

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?

Solution

  • Using

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

    instead of

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

    Solved my problem.