Using Sub-Component
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>