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