From 74673545c0ce2bffcd119443b9e25d80dd002b0d Mon Sep 17 00:00:00 2001
From: Chuck Jazdzewski <chuckj@google.com>
Date: Mon, 22 May 2017 13:00:38 -0700
Subject: [PATCH] docs(aio): document the non-null assertion operator

---
 .../src/app/app.component.html                |  9 ++++++++
 aio/content/guide/template-syntax.md          | 23 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 760fa3a367..5b2a34421b 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -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 -->
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 21dc1d5b02..cb193196b6 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -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.