diff --git a/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts b/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts new file mode 100644 index 0000000000..79c9f38d1c --- /dev/null +++ b/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts @@ -0,0 +1,20 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by } from 'protractor'; + +describe('Built Template Functions Example', function () { + beforeAll(function () { + browser.get(''); + }); + + it('should have title Built-in Template Functions', function () { + let title = element.all(by.css('h1')).get(0); + expect(title.getText()).toEqual('Built-in Template Functions'); + }); + + it('should display $any( ) in h2', function () { + let header = element(by.css('h2')); + expect(header.getText()).toContain('$any( )'); + }); + +}); diff --git a/aio/content/examples/built-in-template-functions/example-config.json b/aio/content/examples/built-in-template-functions/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/built-in-template-functions/src/app/app.component.css b/aio/content/examples/built-in-template-functions/src/app/app.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/aio/content/examples/built-in-template-functions/src/app/app.component.html b/aio/content/examples/built-in-template-functions/src/app/app.component.html new file mode 100644 index 0000000000..0a10c023e4 --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/app/app.component.html @@ -0,0 +1,15 @@ +

{{title}}

+ +

$any( ) type cast function and an undeclared member

+ +

There is no such member as bestByDate in the following two examples, so nothing renders:

+ +

The item's undeclared best by date is: {{$any(item).bestByDate}}

+ + +

using this

+ +

The item's undeclared best by date is: {{$any(this).bestByDate}}

+ + + diff --git a/aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts b/aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts new file mode 100644 index 0000000000..31b39079ce --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts @@ -0,0 +1,16 @@ +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); +}); diff --git a/aio/content/examples/built-in-template-functions/src/app/app.component.ts b/aio/content/examples/built-in-template-functions/src/app/app.component.ts new file mode 100644 index 0000000000..50ac8c7896 --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/app/app.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'Built-in Template Functions'; + + item = { + name : 'Telephone', + origin : 'Sweden', + price: 98 + }; +} diff --git a/aio/content/examples/built-in-template-functions/src/app/app.module.ts b/aio/content/examples/built-in-template-functions/src/app/app.module.ts new file mode 100644 index 0000000000..926975afe8 --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/app/app.module.ts @@ -0,0 +1,18 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + + +import { AppComponent } from './app.component'; + + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/aio/content/examples/built-in-template-functions/src/index.html b/aio/content/examples/built-in-template-functions/src/index.html new file mode 100644 index 0000000000..ec5292df8c --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/index.html @@ -0,0 +1,14 @@ + + + + + Built-in Template Functions Example + + + + + + + Loading... + + diff --git a/aio/content/examples/built-in-template-functions/src/main.ts b/aio/content/examples/built-in-template-functions/src/main.ts new file mode 100644 index 0000000000..a9ca1caf8c --- /dev/null +++ b/aio/content/examples/built-in-template-functions/src/main.ts @@ -0,0 +1,11 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/built-in-template-functions/stackblitz.json b/aio/content/examples/built-in-template-functions/stackblitz.json new file mode 100644 index 0000000000..d77c2c273f --- /dev/null +++ b/aio/content/examples/built-in-template-functions/stackblitz.json @@ -0,0 +1,10 @@ +{ + "description": "Built-in Template Functions", + "files": [ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1,2].*" + ], + "file": "src/app/app.component.ts", + "tags": ["Built-in Template Functions"] +} diff --git a/aio/content/examples/interpolation/src/app/app.component.spec.ts b/aio/content/examples/interpolation/src/app/app.component.spec.ts index 852c902d87..31b39079ce 100644 --- a/aio/content/examples/interpolation/src/app/app.component.spec.ts +++ b/aio/content/examples/interpolation/src/app/app.component.spec.ts @@ -13,15 +13,4 @@ describe('AppComponent', () => { const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); - it(`should have as title 'Featured product:'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('Featured product:'); - })); - it('should render title in a p tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('p').textContent).toContain('Featured product:'); - })); }); diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index 0df3622663..62f52ba3e2 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -1997,29 +1997,29 @@ You'll need this template operator when you turn on strict null checks. It's opt
+{@a built-in-template-functions} + +## Built-in template functions + {@a any-type-cast-function} -## The `$any` type cast function (`$any( )`) +### The `$any()` type cast function -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). +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 +the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any) as in the following 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. +When the Angular compiler turns this template into TypeScript code, +it prevents TypeScript from reporting that `bestByDate` is not a member of the `item` +object when it runs type checking on the template. -The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of +The `$any()` cast function also works with `this` to allow access to undeclared members of the component. - + -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. +The `$any()` cast function works anywhere in a binding expression where a method call is valid.