This div is initially saveable, unchanged, and special.
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Helpful study course
Study course
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
|
|
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
Built-in structural directives
NgIf Binding
If isActive is true, app-item-detail will render:
If currentCustomer isn't null, say hello to Laura:
Hello, {{currentCustomer.name}}
nullCustomer is null by default. NgIf guards against null. Give it a value to show it:
Hello, {{nullCustomer}}
NgIf binding with template (no *)
Add {{currentItem.name}} with template
Show/hide vs. NgIf
Show with class
Hide with class
ItemDetail is in the DOM but hidden
Show with style
Hide with style
NgFor Binding
{{item.name}}
*ngFor with ItemDetailComponent element
*ngFor with index
with semi-colon separator
{{i + 1}} - {{item.name}}
with comma separator
{{i + 1}} - {{item.name}}
*ngFor trackBy
without trackBy
({{item.id}}) {{item.name}}
Item DOM elements change #{{itemsNoTrackByCount}} without trackBy
with trackBy
({{item.id}}) {{item.name}}
Item DOM elements change #{{itemsWithTrackByCount}} with trackBy