4. Displaying Data

Interpolation with double curly braces, data flows from component to template:

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

@Component({
  selector: 'app-root',
  template: `
        <h1>{{ title }}</h1>
          <div class="left">
            <h2>My favorite technology is: {{ myTechnology }}</h2>
          </div>
          <div class="right">
            <img [src]="imageUrl" class="img-round" alt="image">
          </div>
  `
})
export class AppComponent {
  title = 'Tour of Technologies';
  myTechnology = 'Angular 4';
  imageUrl = '../assets/polymer6.jpg';

}

CSS Selector in @Component decorator specifies an element named <app-root>. This element is a placeholder in body of index.html file.

<body>
  <app-root></app-root>
</body>

Iterating over an array with NgFor:

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

@Component({
  selector: 'app-root',
  template: `
        <h1>{{ title }}</h1>
          <div class="left">
            <h2>My favorite technology is: {{ myTechnology }}</h2>
            <p>Technologies:</p>
            <ul>
                  <li *ngFor="let technology of technologies">
                  {{ technology }}
                  </li>
            </ul>
          </div>
          <div class="right">
            <img [src]="imageUrl" class="img-round" alt="image">
          </div>
  `
})
export class AppComponent {
  title = 'Tour of Technologies';
  technologies = ['Angular 4', 'Angular 5', 'Angular CLI', 'Angular Material'];
  myTechnology = this.technologies[0];
  imageUrl = '../assets/polymer6.jpg';

}

Creating and using a class for data, a typed array of technologies:

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

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

@Component({
  selector: 'app-root',
  template: `
        <h1>{{ title }}</h1>
          <div class="left">
            <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="right">
            <img [src]="imageUrl" class="img-round" alt="image">
          </div>
  `
})
export class AppComponent {
  title = 'Tour of Technologies';
  technologies = [
               new Technology(1, 'Angular 4'),
               new Technology(2, 'Angular 5'),
               new Technology(3, 'Angular CLI'),
               new Technology(4, 'Angular Material')
             ];
  myTechnology = this.technologies[1];
  imageUrl = '../assets/polymer6.jpg';

}

NgIf directive inserts or removes an element based on a truthy/falsy condition:

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

We have learned:

  1. Interpolation with double curly braces to display a component property.
  2. ngFor to display an array of items.
  3. A JavaScript/TypeScript class to shape model data for our component and display properties of that model.
  4. ngIf to display a chunk of HTML based on a boolean expression.

FavoriteComponent:

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

@Component({
  selector: 'app-favorite',
  template: `
      <i class="material-icons" (click)="toggle()">{{ starStatus }}</i>
  `
})
export class FavoriteComponent {
    starStatus = 'star';
        toggle() {
          this.starStatus =  (this.starStatus === 'star') ? 'star_border' : 'star';
        }

}

NgContent (transclusion):

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

@Component({
  selector: 'app-panel',
  template: `
          <div class="card text-white bg-danger mb-3">
              <div class="card-header">
                <ng-content select=".header"></ng-content>
              </div>
              <div class="card-body">
                <ng-content select=".body"></ng-content>
              </div>
          </div>
  `
})
export class PanelComponent {

}

TechnologiesComponent Host:

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

@Component({
  selector: 'app-technologies',
  template: `
        <div class="row">
          <div class="col-6">
          <h2>{{ title }}</h2>
          <app-panel>
          <div class="header"><h1>Angular 5</h1></div>
          <div class="body">
          <h3>One Framework. Mobile & desktop.</h3>
          <p>Angular CLI. Tool, Scaffold, Build Maintain Angular Applications.</p>
          <p>Angular Material. Beautiful CSS optimized for Angular.</p>
          </div>
          </app-panel>
        </div>
        <div class="col">
            <img class="w-100 p-3 rounded-circle" [src]="imageUrl" />
        </div>
      </div>
  `
})
export class TechnologiesComponent {
  title = 'List of Technologies';
  imageUrl = './assets/polymer1.jpg';

}

Let's view the results in Chromium:

results matching ""

    No results matching ""