Template Syntax
Interpolation
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Directives
* prefix and <template>
Template local variables
Inputs and outputs
Pipes
Safe navigation operator ?.
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
{{clickity}}
Hero Name: {{heroName}}
Special
top
Property vs. Attribute (img examples)
![]()
![]()
![]()
top
top
Property Binding
![]()
[ngClass] binding to the classes property
![]()
Interpolated:
Property bound: ![]()
The interpolated title is {{title}}
top
Attribute Binding
top
Class Binding
Bad curly special
Bad curly
Note: "Bad curly" should be smaller but isn't, due to
issue #6901.
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()}}.
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 *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
![]()
myClick2
{{clickMessage2}}
top
Pipes
{{ title | uppercase }}
{{ title | uppercase | lowercase }}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
{{product['price'] | currency:'$'}}
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?.firstName}}
My First Angular Application
top