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.

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>

8. <todo-list [source]="expression" ></todo-list>

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',
}
}

20. <div *ngIf="currentUser">
Hello, {{currentUser.firstName}}
</div>

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