The second angular element (custom element) is not displayed

976 views Asked by At

I have two Angular Elements. The first one contains select-box and the second one looks like this:

<h1>Title</h1>

<ng-content></ng-content>

I try to display both inside another application using @angular-extensions/elements or just by adding script to index.html:

It works:

<app-select *axLazyElement="'assets/select.js'"></app-select>

And it works:

<app-dashboard *axLazyElement="'assets/dashboard.js'">some text</app-dashboard>

It displays only select:

<app-select *axLazyElement="'assets/select.js'"></app-select>

<app-dashboard *axLazyElement="'assets/dashboard.js'">
    <div>some text
        <app-select *axLazyElement="'assets/select.js'"></app-select>
    </div>
</app-dashboard>

And this two display only dashboard without select inside:

<app-dashboard *axLazyElement="'assets/dashboard.js'">
    <div>some text
        <app-select *axLazyElement="'assets/select.js'"></app-select>
    </div>
</app-dashboard>
<app-dashboard *axLazyElement="'assets/dashboard.js'">
    <div>some text</div>
</app-dashboard>

<app-select *axLazyElement="'assets/select.js'"></app-select>

I always see only first custom element. I see that both scripts loaded in browser network and i do not see any errors in console. Does anybody know what happens?

0

There are 0 answers