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






Click me
Click me too!

keyup loop-back component



OneTwo
Five-Six


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
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
Eenie Meanie Miney Moe ???
You picked

NgFor Binding

{{hero.fullName}}

{{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