Skip to main content

Hidden Features | Angular

  • Hidden Features | Angular

ngNonBindable: Exibir Sintaxe do Angular como Texto Simples​

Já quis exibir a sintaxe do Angular (como {{ }}) nos seus templates sem que o Angular a interpretasse? Use ngNonBindable!

<div ngNonBindable>
  Isto não será avaliado: {{ 1 + 1 }}
</div>

Por que é incrível?​

  • Perfeito para documentação ou tutoriais.
  • Impede que o Angular processe vinculações.

ngPlural: Simplifique a Pluralização​

A diretiva ngPlural do Angular facilita o tratamento da pluralização nos templates. Chega de cadeias confusas de *ngIf para casos de singular/plural!

<div [ngPlural]="itemCount">
  <ng-template ngPluralCase="=1">1 item</ng-template>
  <ng-template ngPluralCase="other">{{ itemCount }} itens</ng-template>
</div>

Por que é incrível?​

  • Maneira limpa e legível de lidar com pluralização.
  • Suporta múltiplos idiomas e regras de pluralização.

ngProjectAs: Projeção Avançada de Conteúdo​

O ngProjectAs permite projetar conteúdo em slots específicos de ng-content, mesmo que o seletor não corresponda. Ideal para cenários complexos de projeção de componentes.

<ng-content select="[header]"></ng-content>
<ng-content select="[body]"></ng-content>

<app-card>
  <div ngProjectAs="[header]">Este é o cabeçalho</div>
  <div ngProjectAs="[body]">Este é o corpo</div>
</app-card>

Por que é incrível?​

  • Dá controle detalhado sobre a projeção de conteúdo.
  • Torna seus componentes mais flexíveis.

ngComponentOutlet: Carregamento Dinâmico de Componentes​

O ngComponentOutlet permite carregar componentes dinamicamente em tempo de execução. Isso é perfeito para criar interfaces altamente dinâmicas onde os componentes não são conhecidos em tempo de compilação.

<ng-container *ngComponentOutlet="dynamicComponent"></ng-container>

Por que é incrível?​

  • Habilita a renderização dinâmica de componentes.
  • Ótimo para arquiteturas baseadas em plugins.

ngSkipHydration: Otimize o Desempenho do SSR​

O ngSkipHydration permite ignorar a hidratação de componentes específicos durante a renderização do lado do servidor (SSR), melhorando o desempenho e evitando problemas de hidratação.

<app-my-component ngSkipHydration></app-my-component>

Por que é incrível?​

  • Melhora o desempenho do SSR.
  • Previne incompatibilidades na hidratação.

ngDevMode: Depuração Apenas no Desenvolvimento​

O ngDevMode é um sinalizador global que ativa verificações e avisos específicos do modo de desenvolvimento. Você pode usá-lo para adicionar lógica de depuração que só é executada no ambiente de desenvolvimento.

if (ngDevMode) {
  console.log('Depurando no modo de desenvolvimento');
}

Por que é incrível?​

  • Mantém o código de depuração fora das versões de produção.
  • Simplifica os fluxos de trabalho de desenvolvimento.

ng update --migrate-only: Teste Migrações com Segurança​

O comando ng update --migrate-only permite executar scripts de migração sem atualizar as versões dos pacotes. Ideal para testar migrações ou aplicá-las de forma incremental.

ng update @angular/core --migrate-only --from=13.0.0 --to=14.0.0

Por que é incrível?​

  • Teste migrações com segurança antes de aplicá-las.
  • Permite aplicar migrações gradualmente.

ng build --stats-json: Analise o Tamanho do Bundle​

O ng build --stats-json gera um arquivo stats.json que pode ser usado para analisar o tamanho dos bundles do seu aplicativo. Isso ajuda a identificar dependências grandes e otimizar o desempenho.

ng build --stats-json

Por que é incrível?​

  • Ajuda a otimizar o desempenho do aplicativo.
  • Identifica dependências grandes.

ng generate library: Crie Bibliotecas Reutilizáveis​

O comando ng generate library permite criar bibliotecas reutilizáveis dentro do seu workspace. Isso é perfeito para compartilhar componentes, serviços ou utilitários entre vários projetos.

ng generate library my-lib

Por que é incrível?​

  • Promove a reutilização de código entre projetos.
  • Simplifica manutenção e atualizações.
  • Excelente para configurações monorrepo.

ng deploy: Implantação com um Clique​

O ng deploy automatiza o processo de implantação para vários provedores de hospedagem, como Firebase, GitHub Pages e outros. Ele simplifica significativamente os fluxos de trabalho de implantação.

ng deploy --base-href=/my-app/

Por que é incrível?​

  • Economiza tempo ao automatizar a implantação.
  • Suporta vários provedores de hospedagem.
  • Garante configurações de implantação consistentes.