Merge pull request #776 from kabrunko-dev/docs/translate-challenge-4

docs(pt): translate challenge 4

Author: tomalaforge

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.