Pular para o conteúdo
angular challenges logo Angular Challenges

🔴 ContextOutlet Tipado

Desafio #4

Criado por Thomas Laforge

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 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

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

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.

Contribuidores

Obrigado a todos os contribuidores que ajudaram a melhorar esta documentação!

  • tomalaforge
  • tomer953
  • svenson95
  • jdegand