{ "id": "guide/template-expression-operators", "title": "Template expression operators", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Template expression operatorslink

\n
\n
Marked for archiving
\n

To ensure that you have the best experience possible, this topic is marked for archiving until we determine that it clearly conveys the most accurate information possible.

\n

In the meantime, this topic might be helpful: Hierarchical injectors.

\n

If you think this content should not be archived, please file a GitHub issue.

\n
\n

The Angular template expression language employs a subset of JavaScript syntax supplemented with a few special operators\nfor specific scenarios.

\n
\n

See the for a working example containing the code snippets in this guide.

\n
\n\n

The non-null assertion operator ( ! )link

\n

When you use TypeScript's --strictNullChecks flag, you can prevent the type checker from throwing an error with Angular's non-null assertion operator, !.

\n

The Angular non-null assertion operator causes the TypeScript type checker to suspend strict null and undefined checks for a specific property expression.

\n

For example, you can assert that item properties are also defined.

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

Often, you want to make sure that any property bindings aren't null or undefined.\nHowever, there are situations in which such states are acceptable.\nFor those situations, you can use Angular's non-null assertion operator to prevent TypeScript from reporting that a property is null or undefined.

\n

The non-null assertion operator, !, is optional unless you turn on strict null checks.

\n

For more information, see TypeScript's strict null checking.

\n\n

The $any() type cast functionlink

\n

Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type.\nTo silence the error, you can use the $any() cast function to cast\nthe expression to the any type as in the following example:

\n\n<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>\n\n\n

Using $any() prevents TypeScript from reporting that bestByDate is not a member of the item object.

\n

The $any() cast function also works with this to allow access to undeclared members of the component.

\n\n<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>\n\n\n

The $any() cast function works anywhere in a binding expression where a method call is valid.

\n\n \n
\n\n\n" }