Cacher is the code snippet organizer for pro developers

import { Component, Input } from '@angular/core';
import { NewCmpComponent } from './new-cmp';

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'],
  directives: [NewCmpComponent]
})
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">
    <app-new-cmp [artist]="item">Loading.</app-new-cmp>
  </li>
</ul>

import {
  Component,
  OnInit,
  Input
} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-new-cmp',
  templateUrl: '../new-cmp/new-cmp.component.html',
  styleUrls: ['new-cmp.component.css'],
  inputs: ['artist']
})
export class NewCmpComponent {
  componentName: 'NewCmpComponent'
}

<div>
  <h2>{{artist.name}}</h2>
</div>