title: Fill the Material Dashboard Component dynamically with Data
body: <p>I have <strong>@angular/cli": "~7.3.8"</strong> and <strong>"@angular/material": "^7.3.7"</strong>
  installed. I started a project and added Angular Material to it. After that i installed a Nav Component and called it "mynav" via :</p>
  
  <pre class="lang-js prettyprint-override"><code>ng generate @angular/material:nav mynav
  </code></pre>
  
  
  
  <p>I generated also a Dashboard component from the Angular Material Schematics and called it "mydash" via :</p>
  
  <pre class="lang-js prettyprint-override"><code>ng generate @angular/material:dashboard mydash
  </code></pre>
  
  
  
  <p>The question now, how to add content dynamically (for example Data with ChartJS, that will be updated every time a chance occurs) to the card element in the Dashboard. </p>
  
  <p>The cards elements are organized via a function in the dash.component.ts that consumes the array. Here is the automatically generated code in both files : </p>
  
  <p><strong>dash.component.ts :</strong> </p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { map } from 'rxjs/operators';
  import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
  
  @Component({
    selector: 'app-dash',
    templateUrl: './dash.component.html',
    styleUrls: ['./dash.component.css']
  })
  export class DashComponent {
    /** Based on the screen size, switch from standard to one column per row */
    cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
      map(({ matches }) =&gt; {
        if (matches) {
          return [
            { title: 'Card 1', cols: 1, rows: 1 },
            { title: 'Card 2', cols: 1, rows: 1 },
            { title: 'Card 3', cols: 1, rows: 1 },
            { title: 'Card 4', cols: 1, rows: 1 }
          ];
        }
  
        return [
          { title: 'Card 1', cols: 2, rows: 1 },
          { title: 'Card 2', cols: 1, rows: 1 },
          { title: 'Card 3', cols: 1, rows: 2 },
          { title: 'Card 4', cols: 1, rows: 1 }
        ];
      })
    );
  
    constructor(private breakpointObserver: BreakpointObserver) {}
  }
  </code></pre>
  
  
  
  <p><strong>and dash.component.html :</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="grid-container"&gt;
    &lt;h1 class="mat-h1"&gt;Dashboard&lt;/h1&gt;
    &lt;mat-grid-list cols="2" rowHeight="350px"&gt;
      &lt;mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows"&gt;
        &lt;mat-card class="dashboard-card"&gt;
          &lt;mat-card-header&gt;
            &lt;mat-card-title&gt;
              {{card.title}}
              &lt;button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu"&gt;
                &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
              &lt;/button&gt;
              &lt;mat-menu #menu="matMenu" xPosition="before"&gt;
                &lt;button mat-menu-item&gt;Expand&lt;/button&gt;
                &lt;button mat-menu-item&gt;Remove&lt;/button&gt;
              &lt;/mat-menu&gt;
            &lt;/mat-card-title&gt;
          &lt;/mat-card-header&gt;
          &lt;mat-card-content class="dashboard-card-content"&gt;
            &lt;div&gt;Card Content Here&lt;/div&gt;
          &lt;/mat-card-content&gt;
        &lt;/mat-card&gt;
      &lt;/mat-grid-tile&gt;
    &lt;/mat-grid-list&gt;
  &lt;/div&gt;
  </code></pre>