How to keep material theme styles in NX dev content projection (ng-content)

Viewed 9

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>
        '
        })
0 Answers
Related