Template Syntax

Interpolation
Mental Model
Buttons
Properties vs. Attributes

Property Binding
Attribute Binding
Class Binding
Style Binding

Event Binding

Directives
NgModel (two-way) Binding
NgClass Binding
NgStyle Binding
NgIf
NgSwitch
NgFor
NgFor with index
NgFor with trackBy

* prefix and <template>
Template local variables
Inputs and outputs
Pipes
Elvis ?.
Enums

Interpolation

My current hero is {{currentHero.firstName}}

{{title}}

The sum of 1 + 1 is {{1 + 1}}

The sum of 1 + 1 is not {{1 + 1 + getVal()}}

top

New Mental Model

Mental Model


Mental Model






click me
{{clicked}}

Hero Name: {{heroName}}




Special


top

Property vs. Attribute (img examples)



top

Buttons





top

Property Binding

[ngClass] binding to the classes property
Interpolated:
Property bound:
The interpolated title is {{title}}
top

Attribute Binding

One-Two
FiveSix



top

Class Binding

Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top

Style Binding

top

Event Binding

click with myClick
{{clickMessage}}

Click me
Click me too!






top

NgModel (two-way) Binding

Result: {{currentHero.firstName}}

without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange) = "...firstName=$event"
(ngModelChange) = "setUpperCaseFirstName($event)"
top

NgClass Binding

setClasses returns {{setClasses() | json}}

This div is saveable and special
After setClasses(), the classes are "{{classDiv.className}}"
This div is special
Bad curly special
Curly special
top

NgStyle Binding

This div is x-large

Use setStyles() - CSS property names

setStyles returns {{setStyles() | json}}

This div is italic, normal weight, and extra large (24px)

After setStyles(), the DOM confirms that the styles are "{{getStyles(styleDiv)}}" .

top

NgIf Binding

Hello, {{currentHero.firstName}}
Hello, {{nullHero.firstName}}
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top

NgSwitch Binding

Eenie Meanie Miney Moe ???
Pick a toe
You picked ... Eenie Meanie Miney Moe other
top

NgFor Binding

{{hero.fullName}}

top

NgFor with index

with semi-colon separator

{{i + 1}} - {{hero.fullName}}

with comma separator

{{i + 1}} - {{hero.fullName}}
top

NgForTrackBy

First hero:

without trackBy

({{hero.id}}) {{hero.fullName}}
Hero DOM elements change #{{heroesNoTrackByChangeCount}} without trackBy

with trackBy and semi-colon separator

({{hero.id}}) {{hero.fullName}}
Hero DOM elements change #{{heroesWithTrackByChangeCount}} with trackBy

with trackBy and comma separator

({{hero.id}}) {{hero.fullName}}

with trackBy and space separator

({{hero.id}}) {{hero.fullName}}

with *ngForTrackBy

({{hero.id}}) {{hero.fullName}}

with generic trackById function

({{hero.id}}) {{hero.fullName}}
top

* prefix and <template>

*ngIf expansion

*ngIf

expand to template = "..."

expand to <template>

*ngFor expansion

*ngFor

expand to template = "..."

expand to <template>

top

Template local variables

Example Form



top

Inputs and Outputs

myClick2
{{clickMessage2}} top

Pipes

{{ title | uppercase }}
{{ title | uppercase | lowercase }}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
{{product.price | currency:'USD':true}}
top

Elvis ?.

The title is {{ title }}
The current hero's name is {{currentHero?.firstName}}
The current hero's name is {{currentHero.firstName}}
The null hero's name is {{nullHero.firstName}}
The null hero's name is {{nullHero && nullHero.firstName}}
The null hero's name is {{nullHero?.firstName}}
top

Enums in binding

The name of the Color.Red enum is {{Color[Color.Red]}}

The current color number is {{color}}

top

My First Angular Application

top