title: How to use array to populate contents of the Flex Layout within for loop in angular 7
body: <p>I have used Flex Layout to display a set of cards like the below screenshot. Here the Header of all the cards are "abc". But I would like to display different headers(like "abc" for first card, "def" for the second...) for each cards. Kindly advice how can I populate such values for each card using for loop. Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/YEDEs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YEDEs.png" alt="Flex Layout grids"></a></p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div 
     fxLayout="row wrap" 
     fxLayout.lt-sm="column" 
     fxLayoutGap="10px" 
     fxLayoutAlign="flex-start"
     style="margin-left: 5%;"&gt;
  
     &lt;ng-container *ngFor="let _ of [1,2,3,4,5,6]"&gt;
        &lt;app-card 
           fxFlex="0 1 calc(33.3% - 32px)"
           fxFlex.lt-md="0 1 calc(50% - 32px)"
           fxFlex.lt-sm="100%"
           &gt;&lt;/app-card&gt;
     &lt;/ng-container&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>card.component.html</p>
  
  <pre><code>&lt;mat-card&gt;
     &lt;div style="height: 120px;"&gt;
        &lt;div style="text-align: center;"&gt;
           &lt;h2&gt;abc&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div style="font-size: small;"&gt;
           Content.Content.
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>card.component.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-card',
    templateUrl: 'card.component.html',
    styles: [`
    :host {
      display: block;
      padding: 25px;
      text-overflow: ellipsis;
      word-wrap: break-word;
      overflow: hidden;
    `]
  })
  export class CardComponent {}
  </code></pre>