My First Angular Application

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()}}

New Mental Model

Mental Model
{{currentHero.fullName}}


Mental Model






click me
{{clickity}}

Hero Name: {{heroName}}




Special


Property vs. Attribute (img examples)



Buttons





Property Binding

NgClass is special
The title is {{title}}

Attribute Binding

One-Two
FiveSix



Class Binding

Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too

Style Binding

Event Binding

click with myClick
{{clickMessage}}

Click me
Click me too!






NgModel Binding

Result: {{currentHero.firstName}}

without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange) = "...firstName=$event"
(ngModelChange) = "setUpperCaseFirstName($event)"

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

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)}} .

NgIf Binding

Hello, {{currentHero.firstName}}
Hello, {{nullHero.firstName}}
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 ???
Pick a toe
You picked

NgFor Binding

{{hero.fullName}}


{{i + 1}} - {{hero.fullName}}

* and Template

NgIf expansion

NgFor expansion


Template local variables

Example Form



Inputs and Outputs

myClick2
{{clickMessage2}}

Pipes

{{ title | uppercase }}
{{ title | uppercase | lowercase }}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
{{product['price'] | currency:'$'}}

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