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.

// armazena o elemento em uma variável
const el = $("app-root");
// invoca a função getComponent() passando o elemento armazenado
const c = ng.getComponent(el);
// atualiza o valor do atributo title do componente
c.title = "Hey new ng api!!!";
// invoca o change detector do Angular
ng.markDirty(el);

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:

// armazena o elemento em uma variável
const el = $("app-root");
// invoca a função getComponent() passando o elemento armazenado
const c = ng.getComponent(el);
// atualiza o valor do atributo title do componente
c.title = "Hey new ng api!!!";
// invoca o change detector do Angular
ng.markDirty(el);

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