title: How to list an array in Angular material
body: <p>I added table in html like this and would like to display the modules arrays under row.moduleKey. I have no idea where I can use ngFor.</p>
  <p>the modules table looks like this:
  <a href="https://i.stack.imgur.com/7thDY.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>ts code:</p>
  <pre><code>getAllModulesList() {
      this.educationalContentService.getAllModulesList().subscribe({
          next: (res) =&gt; {
              console.log(&quot;test&quot;, res);
              this.dataSource = new MatTableDataSource(res);
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
  
          },
          error: () =&gt; {
              this.toastr.error('Error while fetching Modules!');
          },
      });
  }
  </code></pre>
  <p>html code:</p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; matSort&gt;
  
                          &lt;ng-container matColumnDef=&quot;moduleKey&quot;&gt;
                              &lt;th class=&quot;client-md-column&quot; mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/th&gt;
                              &lt;td class=&quot;client-md-column&quot; mat-cell *matCellDef=&quot;let row&quot;&gt;{{row.moduleKey}}&lt;/td&gt;
                      
                          &lt;/ng-container&gt;
                          &lt;ng-container matColumnDef=&quot;typeModule&quot;&gt;
                              &lt;th class=&quot;client-md-column&quot; mat-header-cell *matHeaderCellDef mat-sort-header&gt;Type
                              &lt;/th&gt;
                              &lt;td class=&quot;client-md-column&quot; mat-cell *matCellDef=&quot;let row&quot;&gt;&lt;/td&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef=&quot;action&quot;&gt;
                              &lt;th class=&quot;client-sm-column&quot; mat-header-cell *matHeaderCellDef mat-sort-header&gt;Action
                              &lt;/th&gt;
                              &lt;td class=&quot;client-sm-column&quot; mat-cell *matCellDef=&quot;let row&quot;&gt;
                                  &lt;button mat-icon-button (click)=&quot;editClient(row)&quot; color=&quot;primary&quot;&gt;
                                      &lt;mat-icon&gt;edit&lt;/mat-icon&gt;
                                  &lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
  
  
  
                          &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
                          &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  
                          &lt;!-- Row shown when there is no matching data. --&gt;
                          &lt;tr class=&quot;mat-row&quot; *matNoDataRow&gt;
                              &lt;td class=&quot;mat-cell&quot; colspan=&quot;4&quot;&gt;No data matching the filter &quot;{{input.value}}&quot;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
  </code></pre>
  <p>The table on my site looks like this:
  <a href="https://i.stack.imgur.com/hHgkP.png" rel="nofollow noreferrer">enter image description here</a></p>