title: Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError
body: <p>I am new to Angular and Angular Material , </p>
  
  <blockquote>
    <p><strong>Without Angular Materail it is working fine</strong></p>
  </blockquote>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;City&lt;/th&gt;  
      &lt;th&gt;State&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
        &lt;td&gt;{{ varEmp?.address.city}}&lt;/td&gt;
        &lt;td&gt;{{ varEmp?.address.state}}&lt;/td&gt;
  
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>With Angular Material it is not Working</strong></p>
  </blockquote>
  
  <pre><code>&lt;table mat-table [dataSource]="varEmp" class="mat-elevation-z8"&gt;
  
  
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="city"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; City&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element?.address.city}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="state"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; State&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element?.address.state}} &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;
  </code></pre>
  
  <p><strong>In component I declared variable</strong></p>
  
  <pre><code>displayedColumns: string[] = ['city','state'];
  </code></pre>
  
  <p>briefy described component code to reduce complexity </p>
  
  <blockquote>
    <p>Json Object</p>
  </blockquote>
  
  <pre><code>{"address":
     {"city": "Karwar", "state": "Karnataka"}
  }
  </code></pre>