Debug de componentes Angular com window.ng no Angular 9
Com a versão 9 do Angular prestes a sair, temos algumas novas features que vão nos ajudar a desenvolver nossas aplicações e também a debugar-las de maneira certa, e uma dessas novidades é o objeto global window.ng
.
window.ng
Com o window.ng
conseguimos ter acesso direto a Diretivas, Componentes entre outras features do Angular direto do console do browser, tudo isso com o Angular 9 e a nova api do Ivy.
Para fazer nosso teste vamos precisar na última RC
do Angular (9.0.0-rc.7 até o momento deste post). Vamos criar um novo projeto com Angular 9:
Conhecendo a nova API do window.ng
Ok, com nosso projeto rodando vamos conhecer como que a api do window.ng
funciona com alguns exemplos, o primeiro e o mais importante é o ng.getComponent()
.
Com o nosso componente criado, vamos atualizar o valor do atributo title
do nosso componente, para isso precisamos acessar o HTMLElement
do componente, para isso vamos usar a função do Chrome $(selector)
e armazenar em uma variável, el
. A função ng.getComponent()
recebe um elemento, neste caso vamos usar o elemento que está armazenado na variável el
, com isso já conseguimos atualizar o valor do atributo title do nosso componente.
Exemplo:
Casos de uso para o ng.getComponent()
- Acessar um service injetado no componente e disparar algum método do mesmo manualmente e acessar os valores via console;
- Fazer um subscribe em algum Observable e emitir o valor também no console;
- Acessar algum método do próprio componente e analisar se o comportamento está como esperado.
ng.markDirty()
Você deve ter notado que no final do último exemplo usamos o método markDirty()
. Essa função é importante ao debugar usando o console, ela é responsável por chamar a API de change detector do Angular e fazer as devidas alterações no componente especificado, mais uma vez vamos usar o nosso exemplo:
Ao invocar o o markDirty()
nos estamos dizendo ao Angular para atualizar o estado do componente, com isso podemos especificar uma instância de algum componente e acionar o change detector.
Conclusão
Com a nova API vamos interagir rapidamente com os componentes e testar as coisas sem precisar ir e voltar entre o editor e o navegador, com isso novas extensões de desenvolvimento podem ser desenvolvidas sobre essas APIs para facilitar ainda mais nossa vida. 🥳