title: Angular mat-list mat-list-item array
body: <p>In my angular code, I am getting a collection of arrays. When I am binding to the angular html code, I am binding column by column with mat-list and mat-list-item. My grid column for example is by names. So my grid will look something like this</p>
  
  <p>John     Joe    Mary    Kim     Steve
  Smith    Coe    Downs   Carn    Yeh</p>
  
  <h3>How can I get the 1st name for the first column and the next name in the array for the next column?</h3>
  
  <p>In my collection from the ts, it will look like</p>
  
  <pre><code>data = [
    {
      firstname: ['John', 'Joe', 'Mary', 'Kim' 'Steve'],
      lastname: ['Smith', 'Coe', 'Downs', 'Carn' 'Yeh']
    }
  ];
  </code></pre>
  
  <p>In my html code, I would get the firstname for the first column</p>
  
  <pre><code>&lt;div fxLayout="column" fxFlex&gt;
  &lt;mat-list&gt;
    &lt;mat-list-item *ngFor="let name of data"&gt;
      {{name.firstname}}
    &lt;/mat-list-item&gt;
  &lt;/mat-list&gt; 
  &lt;/div&gt;
  &lt;div fxLayout="column" fxFlex&gt;
  &lt;mat-list&gt;
    &lt;mat-list-item *ngFor="let name of data"&gt;
      {{name.firstname}}
    &lt;/mat-list-item&gt;
  &lt;/mat-list&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I only want to get the first name for the 1st column and get the 2nd name in the next column.</p>
  
  <p>My error is that my first column gets all the names in the array.</p>
  
  <p>Thanks</p>
  
  <p>I google the mat-item-list but the examples did not give any clues to what I am trying to  do.</p>
  
  <p>My grid column for example is by names. So my grid will look something like this</p>
  
  <p>John     Joe    Mary    Kim     Steve
  Smith    Coe    Downs   Carn    Yeh
  In my collection from the ts, it will look like</p>
  
  <pre><code>data = [
    { firstname: ['John', 'Joe', 'Mary', 'Kim' 'Steve'],
      lastname: ['Smith', 'Coe', 'Downs', 'Carn' 'Yeh']
    }
  ]
  </code></pre>
  
  <p>in my html code, I would get the firstname for the first column</p>
  
  <pre><code>&lt;div fxLayout="column" fxFlex&gt;
  &lt;mat-list&gt;
    &lt;mat-list-item *ngFor="let name of data"&gt;
      {{name.firstname}}
    &lt;/mat-list-item&gt;
  &lt;/mat-list&gt; 
  &lt;/div&gt;
  &lt;div fxLayout="column" fxFlex&gt;
  &lt;mat-list&gt;
    &lt;mat-list-item *ngFor="let name of data"&gt;
      {{name.firstname}}
    &lt;/mat-list-item&gt;
  &lt;/mat-list&gt; 
  &lt;/div&gt;
  </code></pre>