title: angular material table loop through item array
body: <p>I try to print in Mat-table my Data.</p>
  
  <p>I'm very close but I'm not able to complete my front end.</p>
  
  <p>My data are :</p>
  
  <pre><code>0: {Group: 1, Rules: Array(1), Title: "NAME"}
  1: {Group: 2, Rules: Array(2), Title: "TERRITORY"}
  
  And the array for Group 1 have rules like this (and so on for Group 2):
  0: {Date: "1990-01-01", NewRules: 0, Rules: "Ligue Name", Id: 1}
  1: {Date: "1990-01-01", NewRules: 1, Rules: "Other rules", Id: 2}
  </code></pre>
  
  <p>here's the .html code:</p>
  
  <pre><code>&lt;mat-card-content&gt;
    &lt;table mat-table [dataSource]="rules$ | async" class="mat-elevation-z8"&gt;
  
      &lt;!-- DateModifier Column --&gt;
      &lt;ng-container matColumnDef="Date"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Date&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt;
          {{ element.Reules[0].Date }}
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Reglement Column --&gt;
      &lt;ng-container matColumnDef="Rules"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Rule&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt;
          {{ element.Rules[0].Rules }}
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns"&gt;&lt;/tr&gt;
   &lt;/table&gt;
  &lt;/mat-card-content&gt;
  </code></pre>
  
  <p>What I've got it's ok If I specify : element.Rules[0].Rules</p>
  
  <p>But I want to loop through each item of the array.</p>
  
  <p>Giving something</p>
  
  <pre><code>Date       Rules
  
  1990/1/1  Ligue Name
  
  1990/1/1  Other Rules
  </code></pre>
  
  <p>Also if you can give me this hint too. How Can I print for each Group the title before all the rules ?</p>
  
  <pre><code>Group : NAME
  
  Date       Rules
  
  1990/1/1  Ligue Name
  
  1990/1/1  Other Rules
  
  Group: TERRITORY
   etc....
  </code></pre>
  
  <p>file .ts:</p>
  
  <pre><code>import { Component, OnInit, Input } from "@angular/core";
  import { Reglements } from "../models/models";
  import { MatDialog } from "@angular/material";
  import { FirebaseService } from "../service/firebase.service";
  import { Observable } from "rxjs";
  
  @Component({
    selector: "app-reglements",
    templateUrl: "./reglements.component.html",
    styleUrls: ["./reglements.component.css"]
  })
  export class ReglementsComponent implements OnInit {
    displayedColumns: string[] = ["Date", "Rules"];
  
    @Input()
    // public boardDirection: AngularFireList&lt;Direction[]&gt;;
    public reglements$: Observable&lt;Reglements[]&gt;;
  
    constructor(
      private dialog: MatDialog,
      private firebaseService: FirebaseService
    ) {
      this.reglements$ = firebaseService.loadAllRules();
      this.reglements$.forEach(element =&gt; {
        console.log("eleem", element);
      });
    }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p>Thanks</p>