title: Dynamically loading columns and data in to table in Angular 2
body: <p>I have an HTML page in which I want to create a table. The columns in this table are dynamic which means that they are fetched from the server into a variable in the component using <code>any[]</code> type. The data in this table is also dynamic which means that at the time of programming I don't know which columns and data will come to get bound in the table.</p>
  
  <p>I have tried below code but it doesn't seem to work or give any error. It just creates empty <code>td</code> in the <code>tbody</code>.</p>
  
  <p>Expense.component.html</p>
  
  <pre><code>&lt;div class="panel panel-default" style="margin-top:10px;"&gt;
  &lt;div class="panel-heading"&gt;
      Expenses
  &lt;/div&gt;
  &lt;div class="panel-body" style="position:relative"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th *ngFor="#column of columns"&gt;
                          {{column}}
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="#data of data"&gt;
                      &lt;td *ngFor="#column of columns"&gt;
                          {{data.column}}
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>In the above code, the columns are getting created successfully but the data and column mashup is not working. I am sure there must be a way in Angular 2 to achieve this.</p>
  
  <p>Expense.component.ts</p>
  
  <pre><code>export class ExpenseComponent implements OnInit {
  errorMessage: any[];
  columns: string[];
  data: any[];
  
  constructor(private _commonService: CommonService, private _expenseService: ExpenseService) {
  
  }
  
  ngOnInit(): void {
      this._commonService.getColumnNames('condomanagement', 'expenses')
          .subscribe(data =&gt; this.promise(data), error =&gt; this.errorMessage = &lt;any&gt;error);
  }
  
  private promise(data: string[]) {
      this.columns = data;
      this._expenseService.getExpenses('condomanagement', this.columns)
          .subscribe(data =&gt; this.anotherPromise(data), error =&gt; this.errorMessage = &lt;any&gt;error);
  }
  
  private anotherPromise(data: any[]) {
      this.data = data;
      console.log(this.columns);
      console.log(this.data);
  }
  
  private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
  }
  }
  </code></pre>
  
  <p>The data is getting logged in to console in the above code but not working in the HTML as per my trial. Any ideas, please?</p>
  
  <p>Updated: Just used interpolation like this and it worked</p>
  
  <p><code>{{mydata[column]}}</code></p>