title: Binding data in angular MAT-TABLE with nested interface not working
body: <p>Trying to bind data from <strong>JSON-SERVER</strong> response into my MAT-TABLE, but getting <strong>ERROR Error: Could not find column with id &quot;ModuleNm&quot;</strong></p>
  <p><strong>test data</strong></p>
  <pre><code>{
    &quot;modules&quot;: [
      {
        &quot;Id&quot;: 0,
        &quot;ModuleNm&quot;: &quot;Visa&quot;,
        &quot;UploadDttm&quot;: &quot;01/14/2019 21:27&quot;,
        
      },
      {
        &quot;Id&quot;: 0,
        &quot;ModuleNm&quot;: &quot;Visa&quot;,
        &quot;UploadDttm&quot;: &quot;01/14/2019 21:28&quot;,
      },
  ]
  </code></pre>
  <p><strong>my interface</strong></p>
  <pre><code>export interface IModuleType {
     modules: Module[];
  }
  
  export interface Module {
      Id:             number;
      ModuleNm:       ModuleNm;
      UploadDttm:     string;
    
  }
  </code></pre>
  <p><strong>service</strong></p>
  <pre><code>loadData(selectedModuleType: string): Observable&lt;any&gt;{
     return this._http.get&lt;IModuleType[]&gt;(this.testData );
    }
  </code></pre>
  <p><strong>component</strong></p>
  <pre><code>displayedColumns: string[] = ['ModuleNm', 'UploadDttm',];
  dataSource!: MatTableDataSource&lt;IModuleType&gt;;
  
  getData(selectedModule: string): void {
      console.log('loadModuleData mothod :::::&gt;', selectedModule);
      this.test.loadData(selectedModule).subscribe({
        next: (resp) =&gt; {
         console.log('RESPONSE IN COMPONENT', typeof resp, resp); // getting object 
         this.dataSource = resp;
          
        },
        error: (err: any) =&gt; {
          console.log('Errors :::&gt;', err);
        },
        complete: () =&gt; {
          console.log('request completed');
        },
      });
    }
  </code></pre>
  <p><strong>html</strong></p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
         
          &lt;ng-container matColumnDef=&quot;ModuleNm&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Type &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element[0].modules.ModuleNm}} &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;/table&gt;
  </code></pre>
  <p>Could someone pls help me to understand why I'm getting this error?</p>