Dynamically loading columns and data in to table in Angular 2

Question

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 compone

Answer 1

My solution is use Input() to give column and rows as array into data table component, it only renders that columns and rows i want to see:

in component:

  @Input('cols')
  set cols(value: string){
    this._cols = value;
  }
  get cols(){
    return this._cols;
  }

  Input('rows')
  set rows(value: string){
    this._rows = value;
  }
  get rows(){
    return this._rows;
  }

in view: