title: Angular accessing nested objects values from component.html
body: <p>I want to fill an HTML table dynamically with data from a passed in object with Angular. </p>
  
  <p>As long as I try to access values on the "first level" of my object, the code works fine. The problem is that I can not access values from nested objects. Anyone have a workaround?</p>
  
  <p>table.component.ts:  </p>
  
  <pre><code>setTable(headers: string[],attributes: string[], obj: any) {            
      this.obj = obj;
      this.tableHeaders = headers;
      this.attributes = attributes;
  }
  </code></pre>
  
  <p>table.component.html:</p>
  
  <pre><code>&lt;td *ngFor="let header of tableHeaders; let i = index" &gt;{{ object[attributes[i]]}}&lt;/td&gt;
  </code></pre>
  
  <p>a parent component:</p>
  
  <pre><code>this.table.setTable(
      ['First Name', 'Phone', 'City'],
      ['name', 'phone', '??????'], // Where ???? I have tried both address.street and address[street] and nothing is displayed, and when I try address [object Object] is displayed.
       aUserObject
  );
  </code></pre>
  
  <p>user.model.ts:</p>
  
  <pre><code>export class User {
      id: number;
      name: string;
      phone: string;
      email: string;
      address: Address;
  }
  </code></pre>
  
  <p>Where Address is also an object, with a property <code>street</code>. </p>