Built-in Directives

Built-in attribute directives

NgModel (two-way) Binding

NgModel examples

Current item name: {{currentItem.name}}


NgClass Binding

currentClasses is {{currentClasses | json}}

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



with trackBy and semi-colon separator

({{item.id}}) {{item.name}}

with trackBy and comma separator

({{item.id}}) {{item.name}}

with trackBy and space separator

({{item.id}}) {{item.name}}

with generic trackById function

({{item.id}}) {{item.name}}

NgSwitch Binding

Pick your favorite item

Are you as bright as {{currentItem.name}}?