Missing style when rendering a angular material control

Question

I’m using the angular rendering engine to render material components. But when I render the controls (in my case Cards => mat-card) they do not have any style. So everything that comes with the prebuilt-themes(node_modules\@angular\material\prebuilt-themes ). no style

When I add a card by hand =>

<mat-card> test</mat-card>

And set the class Attribute at the rendering process it works =>

renderer.setAttribute(matCard , "class", "mat-card");

with style

So the Question is, how can I tell angular that it has to add the styles to the Page?

Here is the complete code I’m using to create the control

var matCard = renderer.createElement('mat-card');
renderer.setAttribute(matCard , "class", "mat-card");
const matCardInner = renderer.createText('Dynamic card!');          
renderer.appendChild(matCard, matCardInner);
const container = targetEl.nativeElement;
renderer.appendChild(container, matCard);

Thanks for your help Michael

Why not simply use *ngFor ?

s.alem
– s.alem

2018-02-16 15:39:04 +00:00
Commented Feb 16, 2018 at 15:39 — s.alem
– s.alem, Commented Feb 16, 2018 at 15:39

brasofilo · Accepted Answer · 2018-10-30 13:59:20Z

1

Got the answer on Github.

The solution was to pack the angular material components into own wrapper components in my project and then create the wrapper components. Then the styles are always available and I am able to add my own additional functions like validation in the components.

So for my Project I have now a component for each material design component I'm using.

edited Oct 30, 2018 at 13:59

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

answered Oct 30, 2018 at 13:33

michael

1473 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Missing style when rendering a angular material control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related