From 2d44a2ab0de1aa523c29a1838efc0075cdbece84 Mon Sep 17 00:00:00 2001
From: Chuck Jazdzewski <chuckj@google.com>
Date: Tue, 12 Dec 2017 12:51:38 -0800
Subject: [PATCH] docs(compiler): document the $any type cast function (#20968)

Closes #20966

PR Close #20968
---
 .../src/app/app.component.html                | 23 +++++++++++++++++++
 aio/content/guide/template-syntax.md          | 23 +++++++++++++++++++
 2 files changed, 46 insertions(+)

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 8627c73bcb..fc5b36d35a 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -821,6 +821,29 @@ The null hero's name is {{nullHero && nullHero.name}}
 
 <a class="to-toc" href="#toc">top</a>
 
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- #docregion any-type-cast-function-1 -->
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+  <!-- #enddocregion any-type-cast-function-1 -->
+</div>
+
+<div>
+  <!-- #docregion any-type-cast-function-2 -->
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+  <!-- #enddocregion any-type-cast-function-2 -->
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
 <!-- TODO: discuss this in the Style binding section -->
 <!-- enums in bindings -->
 <hr><h2 id="enums">Enums in binding</h2>
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 31741ccb4d..fd0f37d184 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1983,6 +1983,29 @@ You'll need this template operator when you turn on strict null checks. It's opt
 
 <hr/>
 
+{@a any-type-cast-function}
+
+## The `$any` type cast function (`$any( <expression> )`) 
+
+Sometimes a binding expression will be reported as a type error 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
+the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any).
+
+<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-1" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+In this example, when the Angular compiler turns your template into TypeScript code, 
+it prevents TypeScript from reporting that `marker` is not a member of the `Hero`
+interface.
+
+The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of
+the component.
+
+<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-2" title="src/app/app.component.html" linenums="false">
+</code-example>
+
+The `$any` cast function can be used anywhere in a binding expression where a method call is valid.
+
 ## 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.