From 60637b875118118cebe1d361d37791ebe284ce06 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 21 Mar 2024 17:13:13 +0100 Subject: [PATCH] docs(context-outlet-typed): update content --- .../angular/4-context-outlet-typed.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md index e8e300f..d5441e9 100644 --- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md @@ -16,30 +16,34 @@ sidebar: ## Information -Angular offer the static function [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) to strongly type structural directive. +You can improve template type checking for custom directives by adding template guard properties to your directive definition. Angular offer the static function [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) to strongly type structural directives. However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior. +If you’re not very familiar with `ngTemplateOutlet`, check out this article. + +- [NgTemplateOutlet Type Checking](https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6) + ## Statement -In this exercise, we want to learn how to strongly type our ng-template in our AppComponent. +In this exercise we want to learn how to strongly type our `ng-template` in our `AppComponent`. This exercise has two levels of complexity. -### Level 1: known Interface +### Level 1: Known Interface Currently we have the following piece of code. ![Unkown Person](../../../../assets/4/unknown-person.png 'Unkown Person') -As we can see, name is of type "any". We want to infer the correct type. +As we can see `name` is of type `any`. We want to infer the correct type using a custom directive `PersonDirective`. -### Level 2: generic Interface +### Level 2: Generic Interface Currently we have the following piece of code. ![Unkown Student](../../../../assets/4/unknown-student.png 'Unkown Student') -As we can see, student is of type "any". We want to infer the correct type. +As we can see `student` is of type `any`. We want to infer the correct type using a custom directive `ListDirective`. -But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be inferred. +But in this part, we want to pass a list of **any object** to `ListComponent`. And we still want the correct type to be inferred.