<vaadin-dialog> with <template> has no content

Hey everyone,

in our Angular project, we want to use the vaadin-dialog and render the content using <template>, instead of using the renderer function, which would bloat the .component.ts file.

The dialog does pop up, but its content is just blank, as shown in the screenshot.

This is what the app.component.html looks like:

<vaadin-dialog no-close-on-esc  opened>
    <template>
        <h2>Hello</h2>
    </template>
</vaadin-dialog>

and this is the app.component.ts:

import '@vaadin/vaadin-dialog/vaadin-dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']

})
export class AppComponent {
}

We also have the webcomponents-loader included in our index.html (as in the [using-web-components-in-angular example)]
(https://github.com/vaadin-learning-center/using-web-components-in-angular/tree/master/src).

<script src="webcomponents/webcomponents-loader.js"></script>

We are using version 2.2.1 of vaadin-dialog.

Is there some library/polyfill we are missing or do <template>s “just not work” in Angular applications?

Any help would be greatly appreciated and many thanks in advance!

17784401.jpg

Hi. Please check the Origami project, it provides a way to use Polymer templates:

https://github.com/hotforfeature/origami/blob/master/templates/README.md

\u0000> Serhii Kulykov:\n> Hi. Please check the Origami project, it provides a way to use Polymer templates:\n> \n> https://github.com/hotforfeature/origami/blob/master/templates/README.md\n\n\nIt works like a charm. Thanks a lot! \uD83D\uDE0A

I have same problem in Vuejs! how to fix?