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 }}?