P1 Displaying data in our templates
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'test5-app',
templateUrl: 'test5.component.html',
styleUrls: ['test5.component.css']
})
export class Test5AppComponent {
stringX: string;
arrayY: string[];
objectZ: any;
constructor() {
this.stringX = 'test5 works!';
this.arrayY = ['one', 'two', 'three'];
this.objectZ = [{
name: 'name 1',
src: 'src 2'
}, {
name: 'name 1',
src: 'src 2'
}]
}
}<h1>
{{stringX}}
</h1>
<ul>
<li *ngFor="let item of arrayY">
{{item}}
</li>
</ul>
<ul>
<li *ngFor="let item of objectZ">
{{item.name}} -> {{item.src}}
</li>
</ul>