Tutorial Curso AngularJS

ngIf, ngShow e ngHide: Qual a diferença?

Após ter adquirido uma certa experiência em AngularJS pude notar que algumas práticas levam à uma aplicação baseada em Angular ficarem um tanto lentas. Às vezes simplesmente não paramos para entender o que se passa com os componentes e recursos que usamos no dia a dia. Não conhecer o ngIf do AngularJS e usar sempre ngShow e ngHide é um pecado enorme, principalmente em repeats.

Não estou querendo dizer que ngShow e ngHide são ruins, nada disso! A questão é que cada um tem sua utilidade e momento certo para serem utilizados. Vamos entender melhor o que cada um faz e como funcionam, vamos lá!

Qual a diferença entre ngIf, ngShow e ngHide?

  • ngShow: Torna o elemento visível quando a condição passada para ele seja verdadeira;
  • ngHide: Torna o elemento não visível quando a condição passada para ele seja verdadeira;
  • ngIf: Somente cria/renderiza o elemento quando a condição passada para ele seja verdadeira.

A sutil diferença está no fato de que, com ngIf os elementos somente são renderizados quando a condição passada para ele for verdadeira! Em outras palavras, o HTML só será criado quando for realmente necessário que ele exista!

Hoje durante o desenvolvimento de uma feature eu pude ver de perto o poder disso! Nessa feature eu tenho três painéis (diretivas), onde cada uma tem uma finalidade com N elementos HTML cada. Até conhecer de fato o ngIf, os painéis eram regidos pelo ngShow, numa espécie de “abas”, onde é exibido um de cada vez de acordo com a vontade do usuário. O carregamento inicial da página estava piorando conforme o desenvolvimento da feature avançava, algo precisava ser feito! Então, experimentei o ngIf, e para minha surpresa, o desempenho melhorou muito!

Qual o efeito esperado ao usar o ngIf?

No meu caso, o efeito foi atrasar a criação dos elementos HTML, onde eles somente serão criados quando o usuário quiser visualizar o outro painel (ou “aba”). Mas os benefícios vão muito além, visto que, se você tem uma aplicação realmente grade, onde muitos elementos não são exibidos e não são necessários todo o tempo, você pode simplesmente ordenar ao AngularJS para que não os crie, assim, não pesará no DOM e consumirá menos memória  e processamento.

Exemplo hipotético: Você possui um ngRepeat que cria N DIVs. Nesta DIV que é repetida várias vezes, você possui vários inputs do tipo text e para cada input, você tem um span (label).  Vamos dizer que, o span só deve ser exibido quando o input do tipo text esteja vazio. Assim, se todos os inputs do tipo text estiverem preenchidos, qual o sentido dos spans existirem? Se você utilizar o ngShow ou ngHide, os spans vão continuar existindo, porém, ocultos. Se utilizar o ngIf, os spans vão deixar de existir em tempo de execução.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.