Template Syntax
Interpolation
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event 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
click me
{{clicked}}
Hero Name: {{heroName}}
Special
top
Property vs. Attribute (img examples)
![]()
![]()
![]()
top
top
Property Binding
![]()
[ngClass] binding to the classes property
![]()
is the interpolated image.
![]()
is the property bound image.
"{{title}}" is the interpolated title.
"" is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
"" is the property bound evil title.
top
Attribute Binding
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}}
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}}
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
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
Example Form
top
![]()
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}}
{{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]}}.
The current color is {{Color[color]}} and its number is {{color}}.
top