diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts index 6fee4ef8c1..cc663a1b8f 100644 --- a/aio/content/examples/elements/src/app/popup.component.ts +++ b/aio/content/examples/elements/src/app/popup.component.ts @@ -39,7 +39,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations' `] }) export class PopupComponent { - private state: 'opened' | 'closed' = 'closed'; + state: 'opened' | 'closed' = 'closed'; @Input() set message(message: string) { diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.html b/aio/content/examples/template-expression-operators/src/app/app.component.html index b2e04ec7d2..ec7d8dd06e 100644 --- a/aio/content/examples/template-expression-operators/src/app/app.component.html +++ b/aio/content/examples/template-expression-operators/src/app/app.component.html @@ -72,8 +72,8 @@
!
)The item's color is: {{item!.color}}
+ +The item's color is: {{item.color!.toUpperCase()}}
diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.ts b/aio/content/examples/template-expression-operators/src/app/app.component.ts index e0a6ddf2f5..18258c59be 100644 --- a/aio/content/examples/template-expression-operators/src/app/app.component.ts +++ b/aio/content/examples/template-expression-operators/src/app/app.component.ts @@ -1,6 +1,13 @@ import { Component } from '@angular/core'; +interface Item { + name: string; + manufactureDate: Date; + color?: string | null; + price: number; +} + @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -9,10 +16,11 @@ import { Component } from '@angular/core'; export class AppComponent { title = 'Template Expression Operators'; - item = { + item: Item = { name : 'Telephone', manufactureDate : new Date(1980, 1, 25), - price: 98 + color: 'orange', + price: 98, }; nullItem = null; diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index d6415c57e7..f24bf54e9a 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -2256,22 +2256,20 @@ It works perfectly with long property paths such as `a?.b?.c?.d`. ### The non-null assertion operator ( `!` ) -As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally null or undefined. +As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally `null` or `undefined`. In this mode, typed variables disallow `null` and `undefined` by default. The type checker throws an error if you leave a variable unassigned or try to assign `null` or `undefined` to a variable whose type disallows `null` and `undefined`. -The type checker also throws an error if it can't determine whether a variable will be `null` or undefined at runtime. You tell the type checker not to throw an error by applying the postfix +The type checker also throws an error if it can't determine whether a variable will be `null` or `undefined` at runtime. You tell the type checker not to throw an error by applying the postfix [non-null assertion operator, !](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator "Non-null assertion operator"). The Angular non-null assertion operator, `!`, serves the same purpose in -an Angular template. For example, after you use [*ngIf](guide/template-syntax#ngIf) -to check that `item` is defined, you can assert that -`item` properties are also defined. +an Angular template. For example, you can assert that `item` properties are also defined.