Template syntax in Angular 2.0
Download as PPTX, PDF5 likes3,664 views
This document contains code snippets that demonstrate different Angular data binding syntax and features, including property, event, two-way, attribute, class, and style bindings. It also shows structural directives like *ngIf, *ngFor, and ngSwitch, as well as template references and local variables.
![System
shim
ZoneReflectRx
Libraries
Application
<todo-list [source]="todos"
(selected-change)="update($event)" />
core & common
Angular Frameworks
Router Http Compiler Platform](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-3-320.jpg)
![@Component({
selector: 'todo-list',
styles: [`
.done{
text-decoration: line-through;
color: grey;
}`],
template: `
<ul class="list-unstyled">
<li *ngFor="#todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
<span [class.done]="todo.done">{{todo.text}}</span>
</li>
</ul>`
})
export class TodoList {
@Output() selectedChange = new EventEmitter()
@Input('source') todos: Todo[] = [];
constructor(private db:Db, private proxy:Proxy){}
}](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-4-320.jpg)
![<todo-list [source]="expression" ></todo-list>](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-8-320.jpg)
![<img src="{{heroImageUrl}}">
<img [src]="'' + heroImageUrl">
<div>The title is {{title}}</div>
<div [textContent]="'The title is ' + title"></div>](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-14-320.jpg)
![<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-15-320.jpg)
![Target Sample
Property [property] = "expression"
Event (event) = "expression"
Two-Way [(ngModel)] = "expression"
Attribute [attr.aria-label] = "expression"
Class [class.special] = "expression"
Style [style.color] = "expression"](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-16-320.jpg)
![<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">
The class binding is special
</div>
<div [ngClass]="setClasses()">...</div>
setClasses() {
return {
modified: !this.isUnchanged, // false
special : this.isSpecial, // true
}
}](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-18-320.jpg)
![<div [style.fontSize]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large
</div>
<div [ngStyle]="setStyles()">...</div>
setStyles() {
return {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '8px',
}
}](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-19-320.jpg)
![<span [ngSwitch]="toeChoice">
<template [ngSwitchWhen]="'Eenie'"> Eenie </template>
<template [ngSwitchWhen]="'Meanie'">Meanie </template>
<template [ngSwitchWhen]="'Miney'"> Miney </template>
<template [ngSwitchWhen]="'Moe'"> Moe </template>
<template ngSwitchDefault> Other </template>
</span>](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-21-320.jpg)
![<li
*ngFor="let item of items;
let i = index;
trackBy: trackByFn">
...
</li>
<template
ngFor
let-item
[ngForOf]="items"
let-i="index"
[ngForTrackBy]="trackByFn">
<li>...</li>
</template>](https://image.slidesharecdn.com/template-syntax-160214145029/85/Template-syntax-in-Angular-2-0-23-320.jpg)
Template syntax in Angular 2.0
- 3. System shim ZoneReflectRx Libraries Application <todo-list [source]="todos" (selected-change)="update($event)" /> core & common Angular Frameworks Router Http Compiler Platform
- 4. @Component({ selector: 'todo-list', styles: [` .done{ text-decoration: line-through; color: grey; }`], template: ` <ul class="list-unstyled"> <li *ngFor="#todo of todos"> <input type="checkbox" [(ngModel)]="todo.done"> <span [class.done]="todo.done">{{todo.text}}</span> </li> </ul>` }) export class TodoList { @Output() selectedChange = new EventEmitter() @Input('source') todos: Todo[] = []; constructor(private db:Db, private proxy:Proxy){} }
- 5. <h3>My First Angular Application</h3>
- 6. <h3> {{title}} <img src = "{{heroImageUrl}}" > </h3> first evaluates and then converts to a string.
- 7. <p> Employer: {{ employer?.companyName }} </p>
- 9. <todo-list (click)="statement" ></todo-list> <todo-list (click)="task = $event" ></todo-list>
- 10. <div (click)="clickMessage = $event">...</div> deleted = new EventEmitter<User>(); onDelete() { this.deleted.emit(this.user); } <user-detail (deleted)="onUserDeleted($event)"></user-detail>
- 14. <img src="{{heroImageUrl}}"> <img [src]="'' + heroImageUrl"> <div>The title is {{title}}</div> <div [textContent]="'The title is ' + title"></div>
- 15. <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> Template parse errors: Can't bind to 'colspan' since it isn't a known native property <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
- 16. Target Sample Property [property] = "expression" Event (event) = "expression" Two-Way [(ngModel)] = "expression" Attribute [attr.aria-label] = "expression" Class [class.special] = "expression" Style [style.color] = "expression"
- 18. <!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial"> The class binding is special </div> <div [ngClass]="setClasses()">...</div> setClasses() { return { modified: !this.isUnchanged, // false special : this.isSpecial, // true } }
- 19. <div [style.fontSize]="isSpecial ? 'x-large' : 'smaller'" > This div is x-large </div> <div [ngStyle]="setStyles()">...</div> setStyles() { return { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '24px' : '8px', } }
- 21. <span [ngSwitch]="toeChoice"> <template [ngSwitchWhen]="'Eenie'"> Eenie </template> <template [ngSwitchWhen]="'Meanie'">Meanie </template> <template [ngSwitchWhen]="'Miney'"> Miney </template> <template [ngSwitchWhen]="'Moe'"> Moe </template> <template ngSwitchDefault> Other </template> </span>
- 22. <div *ngFor="let user of users; #i=index"> {{user.fullName}} </div> Creates a local template variable. We can capture the index in a local template variable
- 23. <li *ngFor="let item of items; let i = index; trackBy: trackByFn"> ... </li> <template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> <li>...</li> </template>
- 24. <!-- phone refers to the input element --> <input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button> <!-- fax refers to the input element --> <input ref-fax placeholder="fax number"> <button (click)="callFax(fax.value)">Fax</button>
- 25. Developer guides Angular code source