[
 {
  "id": 64,
  "name": "Utopia",
  "language": "English",
  "genres": [
     "Drama",
     "Science-Fiction",
     "Thriller"
  ],
  "status": "Ended",
  "image": {
     "medium": "http://static.tvmaze.com/uploads/images/medium_portrait/0/474.jpg",
     "original": "http://static.tvmaze.com/uploads/images/original_untouched/0/474.jpg"
  }
 },
 {
  "id": 65,
  "name": "Bones",
  "language": "English",
  "genres": [
    "Drama",
    "Crime",
    "Medical"
  ],
  "status": "Ended",
  "image": {
    "medium": "http://static.tvmaze.com/uploads/images/medium_portrait/80/201202.jpg",
    "original": "http://static.tvmaze.com/uploads/images/original_untouched/80/201202.jpg"
   }
 }
]

@Component({
     selector: 'app-shows',
     templateUrl: './shows.component.html',
     styleUrls: ['./shows.component.css']
})
export class ShowsComponent implements OnInit {

  public gridOptions: GridOptions;
  public tvShowsColumnDefs = new ShowColumn;
  public showMetaData: any;

  constructor(private _contentService: ContentService, private _router: Router,
              private _route: ActivatedRoute) {

  // GridOptions Initialized
  this.gridOptions = <GridOptions>{};
  this.gridOptions.columnDefs = this.tvShowsColumnDefs.columnDefs;
}

ngOnInit() {
 // Prepare Grid Row Data
 this.prepareRowData();
}

prepareRowData() {
 // API Call for getting TV-Shows
 this._contentService.getAllShows()
   .subscribe(response => {
     const shows = response;
     console.log('TVShows-API Response ', shows);

    // Setting Grid RowData using api response
    this.gridOptions.api.setRowData(shows);

  });
}

export class ShowColumn {

public columnDefs = [
    { field: 'id', headerName: '', width: 50 },
    { field: 'image', headerName: '', width: 50, cellRendererFramework: null},
    { field: 'name', headerName: '', width: 250},
    { field: 'language', headerName: 'Language', width: 100},
    { field: 'genres', headerName: 'Genres', width: 250},
    { field: 'status', headerName: 'Status', width: 145 }
];
constructor() { }
}