Skip to content

Commit

Permalink
docs(compiler): document the $any type cast function (#20968)
Browse files Browse the repository at this point in the history
Closes #20966

PR Close #20968
  • Loading branch information
chuckjaz authored and alexeagle committed Jan 12, 2018
1 parent 71dd92b commit d5393c7
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
23 changes: 23 additions & 0 deletions aio/content/examples/template-syntax/src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -821,6 +821,29 @@ <h4>Example Form</h4>

<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>
Expand Down
23 changes: 23 additions & 0 deletions aio/content/guide/template-syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

0 comments on commit d5393c7

Please sign in to comment.