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:
- Interpolation with double curly braces to display a component property.
- ngFor to display an array of items.
- A JavaScript/TypeScript class to shape model data for our component and display properties of that model.
- 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';
}