I have two angular projects, a project created with NX dev to create reusable web components and a normal Angular project that inserts web components created in the NX project. The @angular/material package is installed in both projects. The indigo theme is loaded on the 2 projects (from project.json for the NX project and from angular.json for the normal project)
My problem is that if I pass Material content into my ng-content, the default material styles don't add up. Only the HTML contents pass through the ng-content. Here is an overview of what I currently have:
Do you know why I lose material styles when I pass a material component to content-projection?
**Projet nx dev (web components) :**
app-component.ts :
grid-list web-component :
@Component({
selector:...
template: '
<div>
<ng-content select="[paginator]"></ng-content> <--Material paginator is insert here
<ng-content select="[documents]"></ng-content>
</div>
'
encapsulation: ViewEncapsulation.ShadowDom
})
**Projet Angular :**
app-component.ts :
@Component({
selector:...
template: '
<grid-list>
<!--Material paginator is insert here -->
<mat-paginator paginator [length]="200" [pageSizeOptions]="[10, 50, 100]" aria-label="Select page">
</mat-paginator>
<ul documents><li>text...</li></ul>
</grid-list>
'
})