Template expression operators in Angular

Angular handles what the user sees and can do, by communicating with a component class instance (the component) and its user-facing prototype to accomplish this.

Through your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM), you may be familiar with the component / template duality. The component plays the controller / viewmodel role in Angular, and the prototype/template represents the view.

The syntax of angular template expression uses a subset of JavaScript syntax augmented by a few special operators for different scenarios. The following parts cover three of those operators:

The pipe operator (|)

Pipes are basic functions that receive an input value and return a transformed value.

<p>Title through uppercase pipe: {{title | uppercase}}</p>
<p>Item json pipe: {{item | json}}</p>

The safe navigation operator ( ? ) and null property paths

The Angular Safe Navigation Operator ? , avoids null and undefined values in property paths.

<p>The item name is: {{item?.name}}</p>

The non-null assertion operator ( ! )

Typed variables disallow null and undefined values by default. 

<!-- Assert color is defined, even if according to the `Item` type it could be undefined. --> 
<p>The item's color is: {{item.color!.toUpperCase()}}</p>

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

Open chat
Powered by