diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index 013718101b..246e6842c0 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -542,6 +542,7 @@ It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize {@a binding-expression-validation} + ## Phase 3: Template type checking One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime. @@ -559,7 +560,7 @@ As a result, templates that previously compiled under View Engine can fail type This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option. We do expect to make strict type checking the default in the future. - +For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-typecheck). @@ -618,15 +619,7 @@ For example, to avoid `Object is possibly 'undefined'` error in the template abo Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the binding expression will never be `undefined`. -#### Custom `ngIf` like directives - -Directives that behave like `*ngIf` can declare that they want the same treatment by including a static member marker that is a signal to the template compiler to treat them like `*ngIf`. This static member for `*ngIf` is: - -```typescript - public static ngIfUseIfTypeGuard: void; -``` - -This declares that the input property `ngIf` of the `NgIf` directive should be treated as a guard to the use of its template, implying that the template will only be instantiated if the `ngIf` input property is true. +For more information about input type narrowing, see [Input setter coercion](guide/template-typecheck#input-setter-coercion) and [Improving template type checking for custom directives](guide/structural-directives#directive-type-checks). ### Non-null type assertion operator diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index b428a1f6b0..5a269d4bb7 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -832,6 +832,89 @@ When the `condition` is truthy, the top (A) paragraph is removed and the bottom +{@a directive-type-checks} + +## Improving template type checking for custom directives + +You can improve template type checking for custom directives by adding template guard properties to your directive definition. +These properties help the Angular template type checker find mistakes in the template at compile time, which can avoid runtime errors those mistakes can cause. + +Use the type-guard properties to inform the template type checker of an expected type, thus improving compile-time type-checking for that template. + +* A property `ngTemplateGuard_(someInputProperty)` lets you specify a more accurate type for an input expression within the template. +* The `ngTemplateContextGuard` static property declares the type of the template context. + +This section provides example of both kinds of type-guard property. + +