Components: Missing style when rendering a angular material control

[atmike]

Bug

What is the expected behavior? #### What is the current behavior?

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 ).

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");

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

What is the use-case or motivation for changing an existing behavior?

I have to generate my view from a configuration!

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular ^5.2.4
OS: Windows
typescript: ~2.5.3
browser: all

[jotatoledo]

1. AFAIK there is no such term as "material control".
2. You are mixing dynamic element creation with dynamic component creation. You are currently doing the first, what you want is the second.

[devversion]

Hey, just creating a HTMLElement with the mat-card tag does not mean that the MatCard directive is being instantiated.

Since we add styles through the instantiated directive, just appending a HTMLElement that is not compiled through Angular, won't work.

Please consider using <ng-template> to render your card(s) dynamically. Also there is a more programmatic way by using ComponentFactoryResolver. Related: Potentially this helps for the content.

See: https://angular.io/guide/dynamic-component-loader.

[atmike]

@DevVersion: thx for pushing me in the right direction

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}