title: Angular - ngFor over collection of objects that have an array property
body: <p>I have a class like this:</p>
  
  <pre><code>export class TableColumn {
    columnName: string;
    isToFilter: boolean;
    isToSort: boolean;
    isLink: boolean;
    linkUrl: string;
    columnData: any[];
  
  constructor(
      columnName: string,
      isToFilter: boolean,
      isToSort: boolean,
      isLink: boolean,
      linkUrl: string,
      columnData: any[]) {
      this.columnName = columnName;
      this.isToFilter = isToFilter;
      this.isToSort = isToSort;
      this.isLink = isLink;
      this.linkUrl = linkUrl;
      this.columnData = columnData;
    }
  }
  </code></pre>
  
  <p>You can see there is an array property here - <code>columnData</code>. My problem is when I use <code>*ngFor</code> directive to iterate over array of instances of this class like this: </p>
  
  <pre><code> ngFor="let column of tableColumns" 
  </code></pre>
  
  <p>the directive iterate not only through content of <code>tableColumns</code> but through content of <code>columnData</code> property in every instance as well. </p>
  
  <p>I would like to know how to not iterate through content of property <code>columnData</code>.</p>