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

docs(context-outlet-typed): fix typos and remove link

Browse Source
This commit is contained in:
Sven Brodny
2024-03-24 18:16:46 +01:00
parent 60637b8751
commit 1b6679d851
1 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,17 +16,13 @@ sidebar:
## Information
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.
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.
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.
@@ -36,7 +32,7 @@ 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 using a custom directive `PersonDirective`.
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
@@ -44,6 +40,6 @@ 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 using a custom directive `ListDirective`.
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 want to pass a list of **any object** to `ListComponent`. And we still want the correct type to be inferred.