Cacher is the code snippet organizer for pro developers

import { Component } from '@angular/core';

interface Artist {
  name: string;
  shortname: string;
  reknown: string;
  bio: string;
}

@Component({
  moduleId: module.id,
  selector: 'test5-app',
  templateUrl: 'test5.component.html',
  styleUrls: ['test5.component.css']
})
export class Test5AppComponent {
  artists = ARTISTS;
}

var ARTISTS: Artist[] = [{
  "name": "Mohammed Nisar",
  "shortname": "My shrt name 1",
  "reknown": "Royal acadamy of painting",
  "bio": "My bio 1"
}, {
  "name": "Kumar King",
  "shortname": "My shrt name 2",
  "reknown": "Royal acadamy of Design",
  "bio": "My bio 2"
}, {
  "name": "Honey Sing",
  "shortname": "My shrt name 3",
  "reknown": "Royal acadamy of Dance",
  "bio": "My bio 3"
}]

<ul>
  <li *ngFor="let item of artists">
    {{item.name}}
  </li>
</ul>