3. Displaying Data

My Polymer Princess is the smartest and most beautiful woman in the world. God bless her and God bless Angular.

Interpolation, bind property name in view template with double curly braces:

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

@Component({
  selector: 'app-root',
  template: `
      <div class="row">
      <h1>{{ title }}</h1>
        <div class="col-md-6">
              <h2>My favorite technology is: {{ myTechnology }}</h2>
        </div>
        <div class="col-md-6">
              <img [src]="imageUrl" style="width:60rem; border-radius:50%">
              <i class="fa fa-heart fa-2x myColor" aria-hidden="true"> My Polymer Princess</i>
        </div>
      </div>
  `,
  styles: ['.myColor { color: red; }']
})
export class AppComponent {
  title = 'Angular 4 Love Affair';
  imageUrl = '../assets/keras6.jpg';
  myTechnology = 'Angular 4';

}

NgFor directive in template to display each item in technologies list. technology is a template input variable:

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

@Component({
  selector: 'app-root',
  template: `
      <div class="row">
      <h1>{{ title }}</h1>
        <div class="col-md-6">
              <h2>My favorite technology is: {{ myTechnology }}</h2>
              <p>Technologies:</p>
              <ul>
              <li *ngFor="let technology of technologies">
                  {{ technology }}
              </li>
              </ul>
        </div>
        <div class="col-md-6">
              <img [src]="imageUrl" style="width:60rem; border-radius:50%">
              <i class="fa fa-heart fa-2x myColor" aria-hidden="true"> My Polymer Princess</i>
        </div>
      </div>
  `,
  styles: ['.myColor { color: red; }']
})
export class AppComponent {
  title = 'Angular 4 Love Affair';
  imageUrl = '../assets/keras6.jpg';
  technologies = ['Angular 4', 'AngularJS', 'Angular CLI', 'Angular Material'];
  myTechnology = this.technologies[0];

}

Create class for data:

export class Technology {
  constructor(public id: number, public name: string) { }
}

Use Technology class in the component:

import { Component } from '@angular/core';
import { Technology } from './technology';

@Component({
  selector: 'app-root',
  template: `
      <div class="row">
      <h1>{{ title }}</h1>
        <div class="col-md-6">
              <h2>My favorite technology is: {{ myTechnology.name }}</h2>
              <p>Technologies:</p>
              <ul>
              <li *ngFor="let technology of technologies">
                  {{ technology.name }}
              </li>
              </ul>
        </div>
        <div class="col-md-6">
              <img [src]="imageUrl" style="width:60rem; border-radius:50%">
              <i class="fa fa-heart fa-2x myColor" aria-hidden="true"> My Polymer Princess</i>
        </div>
      </div>
  `,
  styles: ['.myColor { color: red; }']
})
export class AppComponent {
  title = 'Angular 4 Love Affair';
  imageUrl = '../assets/keras6.jpg';
  technologies = [new Technology(1,'Angular 5'), new Technology(2, 'Angular 4'),
                  new Technology(3,'Angular CLI'), new Technology(4, 'Angular Material')];
  myTechnology = this.technologies[0];

}

NgIf for conditional display:

<p *ngIf="technologies.length > 3">We are many technologies!</p>