Novidades no Angular V14 🔥

Finalmente a Angular V14 chegou, e o meu hype tá a mil, porém vamos guardar essa ansiedade e entender o que realmente foi lançado.

Mas o motivo da ansiedade é que algumas dessas novas features estavam sendo muito aguardadas pela comunidade.

Mas antes de sairmos codando no projeto vamos atualizar nossa versão?

É muito simples com o angular CLI, a equipe Angular já disponibiliza uma ferramenta para isso, sabia? Basta clicar no link aqui https://update.angular.io/

Novidades no Angular V14 🔥

1 – Simplificado com o Standalone Components

Essa é uma das principais mudanças que a comunidade esperava, pois uma das maiores insatisfações da comunidade Front-end era a questão da obrigatoriedade da criação dos @NgModules.

No Angular V14, os Standalone Components podem criar uma aplicação inteira sem o @NgModule. Eles estão prontos para serem usados ​​em seus aplicativos para exploração e desenvolvimento.

Assim podendo criar diretivas, pipes, components, totalmente independentes.

Mas, aí você se pergunta, vou perder toda arquitetura que tínhamos antes? E a resposta é não, ainda podemos utilizar da mesma forma que antes.

O legal de tudo isso é que agora temos o Standalone Components e ainda o @NgModule, irado né?

@Component ({
  standalone: true,
  selector: 'app-root',
  imports: [
    MeusComponents,
    MeusModules,
    HttpClientModule,
    CommonModule,
  ],
})
export class AppComponent { }

A flag standalone: true, permite que você adicione imports diretamente em seu @Component() sem um arquivo @NgModule().

Podemos gerar um Standalone Component pelo Angular CLI, basta rodar o seguinte comando:

ng generate component <name> --standalone

Certeza que algumas pessoas ainda vão reclamar disso, pois parece que vai ficar um pouco poluído em nossos components, porém é que nem falei, essa é uma segunda opção para ser utilizada ou você pode continuar usando o @NgModule() que eu acho sensacional.

O bom de tudo isso é que o Angular vem sempre se atualizando e deixando melhor e mais fácil para o desenvolvedor.

2 – Reactive Forms Tipados 🔥

Uma das ferramentas mais robustas no meu ponto de vista para criação de formulários são os Reactive Forms que é um dos grandes diferenciais do Angular.

Agora ela tem tipos, isso mesmo:

– Emma Twersky: O Angular v14 encerra o principal problema do GitHub do Angular: implementar a tipagem estrita para o pacote Angular Reactive Forms.

Agora o Reactive Forms garante que os valores tipados, grupos e matrizes sejam seguros em toda sua API. Isso permite formulários mais seguros, especialmente para casos complexos.

Quer saber mais sobre essa feature? Separei uma postagem super completa do Netanel Basal.

const form = new FormControl('');
 
// <string | null>
const value = form.value;
 
// TypeScript informará erro de tipagem
form.setValue(1);

// ***************************************************
// OU
// ***************************************************

// Já nesse novo exemplo acontece diferente
const form = new FormControl('', { nonNullable: true });
 
// valor <string>
form.value

Você também pode passar um type explicitamente se precisar:

const name = new FormControl<null | string>(null, { nonNullable: true });
 
// Ambos são validos
name.setValue(null);
name.setValue('Netanel');

Exemplos retirados do site do Netanel Basal.

3 – Acessibilidade simplificada do título da página 🔥

Olha que monstruosidade que chegou, agora podemos adicionar o title da página direto na rota da página.

Antes para fazer isso, deveríamos dar umas voltinhas a + em nosso código e agora, basta adicionar a propriedade title, assim:

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
  title: 'My App - Home'  // <-- Page title
}, {
  path: 'about',
  component: AboutComponent,
  title: 'My App - About Me'  // <-- Page title
}];

4 – Injeção de Dependência com a função inject() 🔥

No Angular V14 podemos utilizar diretamente em nossos componentes, diretivas ou pipes. Antes dessa versão só conseguíamos utilizar no método construtor.

Achei bem legal pois conseguimos reutilizar funções de uma maneira mais simples, assim permitindo um mundo maior, como exp.:

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
export function getRouteParam(key: string) {
  return inject(ActivatedRoute).snapshot.params[key];
}
 
@Component({
  selector: 'app-todo-page',
  templateUrl: './todo-page.component.html',
})
export class TodoPageComponent {
  id = getRouteParam('id');
 
  ngOnInit() {
    console.log(this.id)
  }
}

Mas lendo a postagem do Netanel Basal, antes de chegar nos contras, achei bem legal que o meu pensamento foi de encontro ao dele.

Vejo alguns problemas com isso, mas ao mesmo tempo vi a força que isso vai ganhar na comunidade. Leia essa postagem para entender melhor no blog do Netanel Basal.

Conclusão

Muitos outros recursos foram apresentados no Angular V14, veja a lista completa neste link e também no no Blog oficial do Angular. Citei os que acho principais nesta postagem!

Acredito muito no poder do Angular e com essas mudanças ele comprova que é maduro e ficará por muito mais anos no mercado.

Para mim, ele é de longe a ferramenta mais robusta para Web, não desmerecendo React ou Vue que são ótimas também.

Fontes: [ https://blog.angular.io/angular-v14-is-now-available-391a6db736af, https://netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28, https://netbasal.com/unleash-the-power-of-di-functions-in-angular-2eb9f2697d66, https://andrewrosario.medium.com/o-que-h%C3%A1-de-novo-no-revolucion%C3%A1rio-angular-14-9741c9545a24]