Angular: How to dynamically add components to parent Dashboard component? - html

Question

I have two components. One is a dashboard of cards (created with ng generate #angular/material:material-dashboard --name=my-dashboard) where the cards are created like this:
<div class="grid-container">
<h1 class="mat-h1">Dashboard</h1>
<mat-grid-list cols="2" rowHeight="350px">
<mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title> {{card.title}}
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<button mat-menu-item>Expand</button>
<button mat-menu-item>Remove</button>
</mat-menu>
</mat-card-title>
</mat-card-header>
<mat-card-content class="dashboard-card-content">
<div>{{ card.content }}</div>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div>
And is filled like that:
export class DashComponent {
cards = [
{ title: 'Character', cols: 2, rows: 1, content: '<app-character-sheet></app-character-sheet>' },
{ title: 'Card 2', cols: 1, rows: 1 },
{ title: 'Card 3', cols: 1, rows: 2 },
{ title: 'Card 4', cols: 1, rows: 1 }
];
}
I want to fill the cards with different components. But when I went and tried it like you can see above (with the content variable), the HTML didn't parse the selector. The card just hat the literal content: .
How can I dynamically fill my cards with components?
Cheers

Answer 1

If you really need to dynamically insert components, read this article.
Alternative solution is to use structural directives like ngIf or ngSwitchCase for the case where you have limited set of content options:
<mat-card-content class="dashboard-card-content">
<div *ngIf="card.content"><app-character-sheet></app-character-sheet></div>
</mat-card-content>
You can unsafely insert HTML without post processing (but it is not recommended):
<div [innerHTML]="card.content"></div>