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>