Confira as novidades do Angular 15!

Depois de uma versão revolucionária que foi o Angular 14, 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 15, que estabilizou features da versão anterior e também trouxe grandes 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 15 basta seguir o passo-a-passo no Guia de Atualização.

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

Standalone Components estáveis!

Quem acompanhou o lançamento da versão 14, provavelmente ficou muito motivado com a chegada da API de Standalone Components. Porém a equipe do Angular deixou claro que a sua utilização em produção era desencorajada. Agora com a versão 15 essa grande novidade já está 100% estável! 🎉

Mas o que é esse tal de Standalone Component?

Na versão 14, graças aos Standalone Components podemos criar uma aplicação inteira sem utilizar nenhum NgModule. Como o próprio nome já diz, agora temos o poder de criar componentes, diretivas e pipes totalmente independentes.

O sinalizador standalone: ​​true indica que este é um componente independente. A propriedade imports define o contexto de compilação, ou seja, o número de todas as dependências que o componente pode usar. Isso pode ser usado para importar outros componentes independentes, mas também NgModules existentes.

Router também é Standalone!

Não só os componentes podem ser independentes, mas também as definições de rotas da sua aplicação.

Tendo o appRoutes , basta registrá-lo na chamada dobootstrapApplication.

Se você não conhece esse novo processo, confira na documentação oficial do Angular.

O maior benefício em se utilizar o provideRouter é que ele pode ser totalmente tree-shakable! Na hora de realizar o build, serão removidos recursos não utilizados do Router. A equipe do Angular alega em testes, que utilizando essa nova API, o tamanho do bundle final pode ter uma redução de até 11% nos pacotes de roteamento!

Composição de diretivas

Essa nova funcionalidade já estava sendo aguardada por muitas pessoas, pois traz o reaproveitamento de código a outro nível!

A API de composição de diretivas permite anexar host elements com diretivas. Veja o exemplo abaixo:

No código acima, aprimoramos MatMenucom duas diretivas: HasColor e CdkMenu. MatMenureutiliza todas os Inputs, Outputs e toda a lógica associada com HasColors. Já o CdkMenu anexa apenas os Inputs e Outputs selecionados.

Com essa técnica disponível, podemos pensar em estratégias bastante audaciosas.

Com poucas linhas de código, podemos criar diretivas estruturais, semelhantes ao ngIf, porém com uma lógica específica!

Dica: Este trecho de código utiliza a função inject. Uma outra grande novidade do Angular 14. Falei um pouco sobre ela neste artigo.

Vale mencionar que a API de Composição de Diretivas só está disponível para diretivas Standalone.

Conclusão

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

Podemos concluir que cada vez mais o Angular encoraja a utilização da API Standalone. Ou seja, será cada vez mais comum criarmos componentes, diretivas e pipes independentes (Sem um módulo específico) para poder tirar proveito de todas as novidades.