Template Syntax
Interpolation
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Directives
* prefix and <template>
Template local variables
Inputs and outputs
Pipes
Elvis ?.
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
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
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?.firstName}}
My First Angular Application
top