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