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

docs(context-outlet-typed): update content

Browse Source
This commit is contained in:
Sven Brodny
2024-03-21 17:13:13 +01:00
parent 849b90a7b7
commit 60637b8751
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,30 +16,34 @@ 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 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. 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 ## 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 a 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 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.