Confira as novidades do Angular 18

Depois de uma versão revolucionária que foi o Angular 17, já temos o seu sucessor. Como protocolo, a equipe do Angular promete lançar uma nova versão a cada 6 meses, e cá estamos com a versão 18, que estabilizou várias features da versão anterior e também trouxe excelentes novidades.

Atualizando sua aplicação

Como muitos devem saber, é muito simples atualizar a versão da sua aplicação Angular utilizando o Angular CLI. Para atualizar para a versão 18 basta seguir o passo-a-passo no Guia de Atualização.

Dica: A minha Talk Angular Update: Guia Prático para Atualizações Sem Estresse talvez possa te ajudar nesse processo.

Agora que estamos com a aplicação atualizada, vamos conhecer as principais novidades apresentadas nesta versão.

Eventos unificados de mudança de controle

Esta é uma feature que era muito aguardada pela comunidade. Uma issue foi criada em 2016 e após 8 anos ela foi finalizada! 🎉

Trata-se de um novo método para a classe AbstractControl que permite a assinatura e o rastreamento de alterações de status e valor em um determinado controle (pristine, touched, dirty). Os eventos incluem TouchedEvent, PristineEvent, ValueChangeEvent e StatusEvent.

Isso dará muito mais controle para nossos formulários! Basta realizar o subscribe do Observable “events”. ✌️ E como a implementação é em AbstractControl, podemos realizar esta operação em FormControls, FormGroups e FormArrays.

Conteúdo padrão para o ng-content

Você provavelmente utiliza muito o ng-content para a projeção de conteúdo, certo? Ele é muito importante para a construção de componentes flexíveis com maior reuso.

Agora na versão 18, podemos definir uma estrutura padrão para ele caso não seja passado um valor. Extremamente útil!

Redirect mais eficiente com RedirectCommand

Sabemos que a equipe do Angular está cada vez mais voltada para o uso de funções em vez de classes. É recomendado que criemos Guards, Resolvers e Interceptors em forma de função para estar a par dos últimos recursos lançados.

Para exemplificar, podemos criar uma Guard em forma de função para retornar uma UrlTree para uma página 404 ou algo do tipo. Porém esta técnica tinha suas desvantagens. Não tínhamos todos os recursos do Router.navigate como o skipLocationChange e o replaceUrl.

Para resolver este problema, foi introduzido o RedirectCommand. Com ele temos todo o acesso para opções adicionais. Podemos utilizá-lo em Guards e Resolvers. Veja o exemplo dele em ação em uma Guard que redireciona para um componente de erro, porém, sem adicionar um histórico de navegação graças ao skipLocationChange.

import { RedirectCommand } from '@angular/router';

export const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    canActivate: [
      () => {
        return new RedirectCommand(inject(Router).parseUrl('/error'), {
          skipLocationChange: true,
        });
      },
    ],
  },
  {
    path: 'error',
    component: ErrorComponent,
  },
];

Função para o redirectTo

Continuando com o assunto de redirecionamento, outra feature muito interessante é a possibilidade de retornar uma função para a propriedade redirectTo do objeto de configuração de rotas. Isso significa que podemos retornar uma UrlTree com params, query params, route data e outras customizações!

Agora podemos retornar tanto uma string para o redirectTo, quanto uma função que retorna uma string ou uma UrlTree. Muito mais flexibilidade para o roteamento!

Material 3 estável

O Material 3 é a última versão do Material Design, o Design System do Google. No Angular 17 já tínhamos acesso a ele, porém com suporte experimental.

Agora no Angular 18 já temos o Material 3 estável e pronto para uso! A própria página do Angular Material já está feita com a nova versão. Se você deseja migrar para ela, confira este guia da documentação.

Conclusão

Muitos outros recursos foram apresentados na versão 18, veja a lista completa neste link e também no Blog oficial do Angular.

Podemos concluir que cada vez mais o Angular está aprimorando sua performance e a experiência de desenvolvimento, uma vez que estão evoluindo em processos importantíssimos, como a remoção do Zone.js e aprimoramento do Server Side Rendering também. Mas isso não significa que novas features chegam para deixar o framework ainda mais robusto!