diff --git a/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md new file mode 100644 index 000000000..b04225c01 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/4-context-outlet-typed.md @@ -0,0 +1,45 @@ +--- +title: 🔴 ContextOutlet Tipado +description: Desafio 4 é sobre tipagem forte em diretivas ngContextOutlet +author: thomas-laforge +contributors: + - tomalaforge + - tomer953 + - svenson95 + - jdegand +challengeNumber: 4 +command: angular-context-outlet-type +blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6 +sidebar: + order: 201 +--- + +## Informação + +Você pode melhorar a verificação de tipo do template para diretivas personalizadas adicionando guardas de propriedades de template na definição de sua diretiva. Angular oferece a função estática [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) para tipar fortemente diretivas estruturais. + +No entanto, o contexto do tipo do **NgTemplateOutlet** é **Object**. Mas com a a ajuda do guarda acima, podemos melhorar esse comportamento. + +## Declaração + +Neste exercício, queremos aprender como tipar fortemente nosso `ng-template` no `AppComponent`. + +Este exercício tem dois níveis de complexidade. + +### Nível 1: Interface Conhecida + +Atualmente nós temos o seguinte trecho de código. + +![Unkown Person](../../../../../assets/4/unknown-person.png 'Unkown Person') + +Como podemos ver, `name` é do tipo `any`. Queremos inferir o tipo correto usando a diretiva personalizada `PersonDirective`. + +### Level 2: Interface Genérica + +No momento presente, temos o seguinte trecho de código. + +![Unkown Student](../../../../../assets/4/unknown-student.png 'Unkown Student') + +Como podemos ver, `student` é do tipo `any`. Queremos inferir o tipo correto usando a diretiva personalizada `ListDirective`. + +Mas nesta parte, queremos passar uma lista de **qualquer objeto** para `LPersonistComponent`. E também queremos que o tipo correto seja inferido.