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

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

This div is italic, normal weight, and x-large
After setStyles(), the styles are "{{getStyles(styleDiv)}}"

Use setStyles2() - camelCase style property names

setStyles2 returns {{setStyles2() | json}}

This div is italic, normal weight, and x-large
After setStyles2(), the styles are "{{getStyles(styleDiv2)}}"

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'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
{{product.price | currency:'USD':true}}

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 && nullHero.firstName}}
The null hero's name is {{nullHero?.firstName}}

Enums in binding

The name of the Color.Red enum is {{Color[Color.Red]}}

The current color number is {{color}}