Angular

Novidades do Angular 18.1

Conheça as novidades do framework Angular 18.1. Neste pequeno resumo falamos sobre a declaração de variáveis direto no template com o @let, suporte ao TypeScript 5.5 e o uso do UrlTree no RouterLink.

Marcelo Ribas Vismari

15 de Jul de 2024 — 3 min read

Novidades Angular 18.1

A versão 18.1 do framework Angular foi lançada recentemente (10/07/2024). Dentre as novidades, podemos destacar:

Declaração de variáveis diretamente no template com @let (developer preview)
Atualização para TypeScript 5.5
Uso de UrlTree como input no [routerLink]

Declarando variáveis no template com o @let

Com o @let, podemos declarar variáveis diretamente no template, o que traz benefícios como melhor legibilidade e simplificação do código. Veja o exemplo abaixo:

@if (carrosPorMarca$ | async; as carrosPorMarca) {
  @for (marca of carrosPorMarca | keyvalue; track marca.key) {
    <h1>{{marca.key}}</h1>
    <ul>
      @for (carro of marca.value; track $index) {
        <li>
          <strong>{{carro.modelo}}</strong>
          <div>{{carro.detalhes.ano}}</div>
          <div>{{carro.detalhes.preco | currency}}</div>
        </li>
      }
    </ul>
  }
} @else {
  <div>carregando...</div>
}

Pode ser reescrito para:

@let carrosPorMarca = carrosPorMarca$ | async;
@if (carrosPorMarca) {
  @for (marca of carrosPorMarca | keyvalue; track marca.key) {
    <h1>{{marca.key}}</h1>
    <ul>
      @let carros = marca.value;
      @for (carro of carros; track $index) {
        @let modelo = carro.modelo;
        @let ano = carro.detalhes.ano;
        @let preco = carro.detalhes.preco | currency;

        <li>
          <strong>{{modelo}}</strong>
          <div>{{ano}}</div>
          <div>{{preco}}</div>
        </li>
      }
    </ul>
  }
} @else {
  <div>carregando...</div>
}

Suporte ao TypeScript 5.5

O Angular v18.1 agora suporta TypeScript 5.5. Isso permite usar a versão mais recente do TypeScript em suas aplicações. Uma das novidades é a melhor detecção de mudanças nas variáveis ao longo do código. Veja o exemplo abaixo:

detalhesCarro(modelos: string[]) {
  const carros: Carro[] = [
    { modelo: 'Corolla', detalhes: { ano: 2021, preco: 20000 } },
    { modelo: 'Camry', detalhes: { ano: 2020, preco: 25000 } },
    { modelo: 'Model S', detalhes: { ano: 2021, preco: 80000 } },
    { modelo: 'Model 3', detalhes: { ano: 2020, preco: 35000 } },
  ];

  const modelosProcurados = modelos
    .map((modeloProcurado) =>
      carros.find((carro) => carro.modelo === modeloProcurado)
    )
    // a expressão acima retorna o tipo: (Carro | undefined)[]
    // então filtramos para retirar os não encontrados:
    .filter((a) => a !== undefined);

  for (const modeloProcurado of modelosProcurados) {
    // Antes do TypeScript 5.5 você pegaria o seguinte erro:
    //   'modeloProcurado' is possibly 'undefined'
    //
    // Para resolver, poderia modificar para:
    // console.log('Modelo encontrado: ', modeloProcurado?.modelo);

    console.log('Modelo encontrado: ', modeloProcurado.modelo);
  }
}

Abaixo há a lista completa com as novidades do TypeScript 5.5:

Passando uma UrlTree para o RouterLink

Até então a diretiva [routerLink] aceitava como entrada os tipos string e any[]. A partir desta versão (18.1) também podemos utilizar o tipo UrlTree:

@Component({ ... })
export class ExemploComponent {
  linkExemplo = inject(Router).createUrlTree(["/carros", 1, 'detalhes']);
}

<button
  role="link"
  [routerLink]="['carros', 1, 'detalhes']">Link</button>

ou podemos passar o tipo UrlTree

<button
  role="link"
  [routerLink]="linkExemplo">Link</button>