Template syntax in Angular 2.0

System shim ZoneReflectRx Libraries Application <todo-list [source]="todos" (selected-change)="update($event)" /> core & common Angular Frameworks Router Http Compiler Platform

@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){} }

<h3>My First Angular Application</h3>

<h3> {{title}} <img src = "{{heroImageUrl}}" > </h3> first evaluates and then converts to a string.

<p> Employer: {{ employer?.companyName }} </p>

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

<todo-list (click)="statement" ></todo-list> <todo-list (click)="task = $event" ></todo-list>

<div (click)="clickMessage = $event">...</div> deleted = new EventEmitter<User>(); onDelete() { this.deleted.emit(this.user); } <user-detail (deleted)="onUserDeleted($event)"></user-detail>

<img src="{{heroImageUrl}}"> <img [src]="'' + heroImageUrl"> <div>The title is {{title}}</div> <div [textContent]="'The title is ' + title"></div>

<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  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

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"

<div [class.special]="isSpecial"> The class binding is special </div> <div [ngClass]="setClasses()">...</div> setClasses() { return { modified: !this.isUnchanged, // false special : this.isSpecial, // true } }

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

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

<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>

<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

<input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button>  <input ref-fax placeholder="fax number"> <button (click)="callFax(fax.value)">Fax</button>

Developer guides Angular code source

Template syntax in Angular 2.0

Template syntax in Angular 2.0

More Related Content

What's hot

Viewers also liked

Similar to Template syntax in Angular 2.0

More from Eyal Vardi

Recently uploaded

Template syntax in Angular 2.0