vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #705 from svenson95/docs-typed-context-outlet

Browse Source 
docs(context-outlet-typed): update content
This commit is contained in:
Laforge Thomas
2024-03-25 11:28:08 +01:00
committed by GitHub
parent 357524e44c 1b6679d851
commit 533e990d62
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
View File

@@ -16,30 +16,30 @@ sidebar:
## Information ## 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 offers 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. However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.
## Statement ## 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. This exercise has two levels of complexity.
### Level 1: known Interface ### Level 1: Known Interface
Currently we have the following piece of code. Currently we have the following piece of code.
![Unkown Person](../../../../assets/4/unknown-person.png 'Unkown Person') ![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 the custom directive `PersonDirective`.
### Level 2: generic Interface ### Level 2: Generic Interface
Currently we have the following piece of code. Currently we have the following piece of code.
![Unkown Student](../../../../assets/4/unknown-student.png 'Unkown Student') ![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 the 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.