niisar
5/13/2016 - 4:01 PM

P1 Displaying data in our templates

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>