My First Angular Application
{{title}}
My current hero is {{currentHero.firstName}}
Hey there, {{currentHero.firstName}}
The title is {{title}}
The sum of 1 + 1 is not {{1+1+getVal()}}
The element id is {{f.id}}
The title is {{title}}
Mental Model
keyup loop-back component
The class is special
The class is special
The class binding is special
This one is not so special
This class binding is special too
{{currentHero?.firstName}}
{{currentHero.fullName}}
This div is special
This div is saveable and special
After setClasses(), the classes are "{{classDiv.className}}"
This div is larger
This div is italic, normal weight, and larger
After setStyles(), the styles are "{{getStyles(classDiv)}}"
NgIf Binding
Add {{currentHero.firstName}}
Remove {{nullHero.firstName}}
Hero Detail removed from DOM because isActive is false
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
NgSwitch Binding
You picked
Eenie
Meanie
Miney
Moe
Other
NgFor Binding
{{i+1}} - {{hero.fullName}}
{{ title | uppercase }}
{{ title | uppercase | lowercase }}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
{{product.price | currency:'USD':true}}
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}}
Template Driven Form