{{title}}


Pipes

Title through uppercase pipe: {{title | uppercase}}

Title through a pipe chain: {{title | uppercase | lowercase}}

Manufacture date with date format pipe: {{item.manufactureDate | date:'longDate'}}

Manufacture date with uppercase pipe: {{(item.manufactureDate | date:'longDate') | uppercase}}

Item json pipe: {{item | json}}

Price with currency pipe: {{item.price | currency:'USD'}}


Safe navigation operator: ? and null

The item name is: {{item?.name}}

The nullItem name is: {{nullItem?.name}}


Error because nullItem is null:

Uncomment above paragraph and see console log for error about nullItem.name:

TypeError: Cannot read property 'name' of null


The div will not display and there's no error:

There's a child paragraph element in here that doesn't show.

The null item's name {{nullItem.name}}


Div shows but interpolation doesn't:

Using and (&&)

The null item's name is: {{nullItem && nullItem.name}}

Using safe navigation operator (?)

The null item's name is: {{nullItem?.name}}


Non-null assertion operator (!)

The item's color is: {{item.color!.toUpperCase()}}