title: Is there a way to display different tables in tabs of material-angular?
body: <p>So, I'm somewhat new to Angular, and have never used Angular-Material before. So if the solution is simple go easy on me please. Basically, what I'm trying to do, using Angular-Material tabs, is show a different table under each tab that get's generated. The table grabs the information from the 12 dictionaries in the inner array shown below.</p>
  
  <p>For reference, the object I am trying to traverse through looks like this:</p>
  
  <pre><code>object= [
  [ {}x12 ]
  [ {}x12 ]]
  </code></pre>
  
  <p>The object basically represents going through tabs of Year 1, Year 2, Year 3, etc. The x12 objects is for each month of that array (the amount of inner arrays can change).</p>
  
  <p>My HTML looks like:</p>
  
  <pre><code>&lt;mat-tab-group *ngIf="flag"&gt;
  &lt;mat-tab *ngFor="let res of result" label="Year {{obj[0].year}}"&gt;
    &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Head 1&lt;/th&gt;
          &lt;th&gt;Head 2&lt;/th&gt;
          &lt;th&gt;Head 3&lt;/th&gt;
          &lt;th&gt;Head 4&lt;/th&gt;
          &lt;th&gt;Head 5&lt;/th&gt;
          &lt;th&gt;Head 6&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let res of result[0]"&gt;
          &lt;td&gt;{{ res.a }}&lt;/td&gt;
          &lt;td&gt;{{ res.b | number:'1.2-2' }}&lt;/td&gt;
          &lt;td&gt;{{ res.c | number:'1.2-2' }}&lt;/td&gt;
          &lt;td&gt;{{ res.d | number:'1.2-2' }}&lt;/td&gt;
          &lt;td&gt;{{ res.e | number:'1.2-2' }}&lt;/td&gt;
          &lt;td&gt;{{ res.f |  number:'1.2-2' }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/mat-tab&gt;
  </code></pre>
  
  <p></p>
  
  <p>I changed the names of labels just for a little more clarity if it helps. The label part seems to work fine, if there are 5 inner arrays, it gets Year 1, Year 2, etc. from the inner dictionary. Each tab will show a table, but it is only showing the first inner arrays 12 months, which makes sense since I am telling it to with the ngfor. But I can't seem to get the data to display any other way.</p>
  
  <p>I'm thinking the ngFor for mat-tab must behave differently because again that grabs the correct year from the inner arrays dictionary.</p>
  
  <p>I tried using Mat-Table and couldn't get it to work the way I wanted, plus I personally like the style of the tabs anyway.</p>
  
  <p>I am open to any and all help, including if anyone thinks I am designing my object incorrectly.</p>
  
  <p>Thank you</p>