Template Syntax
Interpolation Mental Model Buttons Properties vs. Attributes Property Binding Event Binding Two-way Binding Directives
* prefix and <template> Template reference variables Inputs and outputs Pipes Safe navigation operator ?. 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
Save
Save
Save
click me
{{clicked}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
interpolated image.
property bound image.
"{{title}}" is the interpolated title.
"property bound title.
"{{evilTitle}}" is the interpolated evil title.
"property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
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
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.firstName}}
top
NgClass Binding
currentClasses returns {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large.
[ngStyle] binding to `currentStyles` - CSS property names
currentStyles returns {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".
top
NgIf Binding
Hello, {{currentHero.firstName}}
Hello, {{nullHero.firstName}}
Add {{currentHero.firstName}} with template
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
Pick a toe
You picked ...
Eenie
Meanie
Miney
Moe
other
Eenie Meanie Miney Moe other
top
NgFor Binding
top
NgFor with index
with semi-colon separator
{{i + 1}} - {{hero.fullName}}
with comma separator
{{i + 1}} - {{hero.fullName}}
top
NgForTrackBy
Refresh heroes
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 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 reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
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]}}.Enum Toggle
top
