2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								# Template expression operators
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								< div  class = "callout is-critical" >  
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								< header > Marked for archiving< / header >  
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								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.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								In the meantime, this topic might be helpful: [Hierarchical injectors ](guide/hierarchical-dependency-injection ).
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								If you think this content should not be archived, please file a [GitHub issue ](https://github.com/angular/angular/issues/new?template=3-docs-bug.md ).
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								The Angular template expression language employs a subset of JavaScript syntax supplemented with a few special operators
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								for specific scenarios.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								See the < live-example > < / live-example >  for a working example containing the code snippets in this guide.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								{@a  non-null-assertion-operator}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## The non-null assertion operator ( `!` )
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								When you use TypeScript's `--strictNullChecks`  flag, you can prevent the type checker from throwing an error with Angular's non-null assertion operator, `!` .
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								The Angular non-null assertion operator causes the TypeScript type checker to suspend strict `null`  and `undefined`  checks for a specific property expression.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								For example, you can assert that `item`  properties are also defined.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< code-example  path = "template-expression-operators/src/app/app.component.html"  region = "non-null"  header = "src/app/app.component.html" > < / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								Often, you want to make sure that any property bindings aren't `null`  or `undefined` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								However, there are situations in which such states are acceptable.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								For those situations, you can use Angular's non-null assertion operator to prevent TypeScript from reporting that a property is `null`  or `undefined` .
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								The non-null assertion operator, `!` , is optional unless you turn on strict null checks.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								For more information, see TypeScript's [strict null checking ](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript" ).
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								{@a  any-type-cast-function}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## The `$any()` type cast function
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								Sometimes a binding expression triggers a type error during [AOT compilation ](guide/aot-compiler ) and it is not possible or difficult to fully specify the type.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								To silence the error, you can use the `$any()`  cast function to cast
							 
						 
					
						
							
								
									
										
										
										
											2020-11-16 22:37:09 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								the expression to the [`any` type ](https://www.typescriptlang.org/docs/handbook/basic-types.html#any ) as in the following example:
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< code-example  path = "built-in-template-functions/src/app/app.component.html"  region = "any-type-cast-function-1"  header = "src/app/app.component.html" > < / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								Using `$any()`  prevents TypeScript from reporting that `bestByDate`  is not a member of the `item`  object.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-10-07 16:58:04 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								The `$any()`  cast function also works with `this`  to allow access to undeclared members of the component.
							 
						 
					
						
							
								
									
										
										
										
											2020-04-28 16:26:58 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< code-example  path = "built-in-template-functions/src/app/app.component.html"  region = "any-type-cast-function-2"  header = "src/app/app.component.html" > < / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								The `$any()`  cast function works anywhere in a binding expression where a method call is valid.