////
src/app/playlist/playlist.component.ts
////

import { Component, OnInit } from '@angular/core';
import { PlaylistService } from '../playlist.service';

@Component({
  moduleId: module.id,
  selector: 'app-playlist',
  templateUrl: './playlist.component.html',
  styleUrls: ['./playlist.component.css']
})

// Component class
export class PlaylistComponent implements OnInit {

  playlists: any[];

  constructor(private _playlistService: PlaylistService) { }

  ngOnInit() { this.getPlaylists() }

  getPlaylists() {
    this._playlistService.getPlaylists()
      .subscribe(
        playlists => this.playlists = playlists
      );
  }
}

////
src/app/playlist/playlist.component.html
////

<tr *ngFor="let asset of playlists.playlist_assets">
                  <td>
                    <img class="img-rounded" src="assets/images/placeholder-200x150.png" alt="" height="50">
                  </td>
                  <td>{{asset.id}}</td>
                  <td>{{asset.asset.name}}</td>
                  <td>{{asset.asset.content_type}}</td>
                  <td>{{asset.duration}}s</td>
                  <td>{{asset.asset.template_type}}</td>
                  <td>{{asset.asset.subtype}}</td>
                  <td>{{asset.banner}}</td>
                  <td>
                    <div class="checkbox checkbox-primary">
                      <input id="checkbox1" type="checkbox">
                      <label for="checkbox1"></label>
                    </div>
                  </td>
                </tr>