docs(aio): document the non-null assertion operator

This commit is contained in:
Chuck Jazdzewski 2017-05-22 13:00:38 -07:00 committed by Alex Rickabaugh
parent 75a311f250
commit 74673545c0
2 changed files with 31 additions and 1 deletions

View File

@ -803,6 +803,15 @@ The null hero's name is {{nullHero && nullHero.name}}
<!-- #enddocregion safe-6 -->
</div>
<div>
<!-- #docregion non-null-assertion-1 -->
<!--No hero, no text -->
<div *ngIf="hero">
The hero's name is {{hero!.name}}
</div>
<!-- #enddocregion non-null-assertion-1 -->
</div>
<a class="to-toc" href="#toc">top</a>
<!-- TODO: discuss this in the Style binding section -->

View File

@ -104,7 +104,7 @@ including:
Other notable differences from JavaScript syntax include:
* no support for the bitwise operators `|` and `&`
* new [template expression operators](guide/template-syntax#expression-operators), such as `|` and `?.`
* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
{@a expression-context}
@ -1931,6 +1931,27 @@ It works perfectly with long property paths such as `a?.b?.c?.d`.
<hr/>
{@a non-null-assertion-operator}
### The non-null assertion operator ( <span class="syntax">!</span> )
The Angular **non-null assertion operator (`!`)** is a post-fix operator that asserts that the preceeding property path
will never be null or undefined.
Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe naviation operator (?.)")
the **non-null assertion operator** does not guard against a null or undefined; rather, it informs the TypeScript type
checker that there is something it might be unaware of that ensures that this property path is defined. This prevents
TypeScript from reporting that the path is possibly null or undefined when strict null checking is enabled.
For example, if you use [*ngIf](guide/template-syntax#ngIf) to check if `hero` is defined, you can assert the uses of
`hero` are defined in the body of the template.
<code-example path="template-syntax/src/app/app.component.html" region="non-null-assertion-1" title="src/app/app.component.html" linenums="false">
</code-example>
The Angular **non-null assertion operator (`!`)** is like TypeScript's _non-null assertion operator (!)_
introduced in [TypeScript 2.0](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html).
## Summary
You've completed this survey of template syntax.
Now it's time to put that knowledge to work on your own components and directives.