0

Foi anunciado que a versão 17 do Angular conterá uma nova solução para carregamento em demandas nos componentes, chamado Deferred Loading.

Quais seriam as vantagens de se utilizar o defer em comparação com a antiga diretiva *ngIf?

Deferred Loading:

{#defer when condition}
  <app-my-component />
{/defer}

Diretiva ngIf:

<app-my-component *ngIf="condition"> </app-my-acomponent>
1
  • 1
    Andei lendo alguns artigos no Medium sobre e a grande vantagem é que o #defer possui 2 tipos de sentenças de condições o when e o on, que inclusive podem ser utilizados juntos, dando um maior poder e controle quanto a renderização dos elementos no template de uma forma tardia.
    – utente
    Commented 27/10/2023 às 20:10

1 Resposta 1

2

A principal vantagem é otimizar o tamanho do bundle inicial da sua aplicação, isso já acontecia quando usamos lazy loading nas rotas, você pode perceber que ao entrar em uma rota usando lazy loading o navegador irá carregar aquela parte de javascript somente quando for a hora, essa possibilidade se amplia com o @defer, e ai está a maior diferença, antes usando apenas uma condição *ngIf o seu componente ainda sim iria fazer parte do bundle.

Além disso, com defer você possui maior controle do seu template, pois só será carregado o conteúdo quando um gatilho for disparado, o framework oferece vários gatilhos já prontos: on idle, on viewport, on interaction, on hover, on immediate, on timer:

@defer (on hover) {
  <app-my-component></app-my-component>
}

Mas você também pode criar o seu customizado usando when:

@defer (when condicaoBollean) {
    <app-my-component></app-my-component>
}

Junto ao @defer, você pode usar também algumas condições especiais como @placeholder, @loading, @error, esse blocos especiais ajudam a você dar um feedback adequado enquando a condição e o carregamento não forem concluídos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .