A versão 19.1.6 do Angular introduz um recurso importante: a track expression que agora permite o uso de variáveis temporárias. Essa funcionalidade permite que a expressão de rastreamento do @for utilize os operadores ?? (coalescência nula) ou || (lógico). Isso é particularmente útil quando o valor anterior é null ou undefined, e o próximo valor definido é usado para identificar o item do array.
Para ilustrar essa novidade, vamos analisar um exemplo prático com um tipo de dado chamado Address, que contém propriedades como código postal e zip. Ambos os campos são definidos como string | undefined. Essa definição acomoda diferentes formatos de endereço, já que endereços nos EUA usam apenas o código zip, enquanto endereços no Canadá utilizam o código postal. Endereços em Hong Kong, por sua vez, não utilizam nenhum dos dois. As propriedades são, portanto, mutuamente exclusivas. Ao renderizar um array de endereços, a track expression do @for combina o código zip e o código postal para rastrear a linha de dados.
Entendendo o Tipo de Dado Address
O tipo de dado Address possui campos obrigatórios como line1, city e country, enquanto os campos zip e postalCode são opcionais. Essa estrutura flexível permite representar endereços de diferentes países de forma consistente.
Para facilitar a compreensão, veja como o tipo é definido em TypeScript:
// address.type.ts
export type Address = {
line1: string;
zip?: string;
postalCode?: string;
city: string;
country: string;
}
A flexibilidade de ter campos opcionais é crucial para lidar com a diversidade de formatos de endereço ao redor do mundo. Essa abordagem garante que o sistema possa representar informações de maneira precisa, independentemente da localização.
Exemplo Prático com Dados de Endereços
Para demonstrar o uso da nova funcionalidade, considere o seguinte conjunto de dados de exemplo, que inclui endereços dos EUA, Canadá e Hong Kong:
import { Address } from "./address.type";
export const addresses: Address[] = [
{
line1: 'Address 1',
zip: '123456',
city: 'New York',
country: 'United States of America'
},
{
line1: '150 Graydon Hall Drive',
postalCode: 'M3A3B1',
city: 'North York',
country: 'Canada'
},
{
line1: '150 Nathan Road',
city: 'Mong Kok',
country: 'Hong Kong'
},
{
line1: '1 Middle Road',
city: 'Tsim Sha Road',
country: 'Hong Kong'
},
{
line1: '197 Yonge Street, Massey Tower',
postalCode: 'M5B0C1',
city: 'Toronto',
country: 'Canada'
}
];
O array addresses contém informações de diferentes localidades. Como Hong Kong não possui código zip ou postal, o campo line1 será usado para rastrear os itens do array.
O próximo passo é criar um bloco @for no template para exibir os dados.
Implementando a Track Expression no Angular
Para inicializar os componentes com o array de endereços, utilize o seguinte código:
// address-list.component.ts
@Component({
selector: 'app-address-list',
imports: [AddressItem],
template: `
@for (address of addresses(); track address.zip || address.postalCode || address.line1) {
<app-address-item [address]="address" />
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddressList {
addresses = input<Address[]>([]);
}
A expressão de rastreamento, definida como address.zip || address.postalCode || address.line1, garante que o Angular utilize o valor de zip para rastreamento quando ele estiver definido. Caso contrário, se o zip for undefined, o código postal será usado. Se ambos forem undefined, a propriedade line1 será utilizada como chave, já que ela sempre terá um valor.
No componente principal (AppComponent), importe o array addresses e passe-o para o componente AddressList como entrada:
@Component({
selector: 'app-root',
imports: [AddressList],
template: `
<app-address-list [addresses]="addresses"/>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
addresses = addresses;
}
O componente AddressList itera sobre o array para renderizar os valores, exibindo cada endereço na interface.
Dica Importante
No exemplo, cada linha do array de endereços possui um código zip, código postal e line1 únicos. Portanto, a expressão address.zip || address.postalCode || address.line1 forma uma chave composta única. Em aplicações do mundo real, é comum que essas propriedades possuam valores duplicados em um banco de dados. Nesses casos, é fundamental que os itens possuam IDs únicos para diferenciá-los.
Para aplicações que utilizam IA, a garantia de dados únicos e bem estruturados é essencial para a precisão e eficiência dos modelos generativos.
Uma das grandes vantagens dessa nova track expression é a capacidade de lidar com dados complexos de forma mais eficiente. A atualização do iPad Air com chip M3 é um exemplo de como novas tecnologias podem melhorar o desempenho e a experiência do usuário.
Para quem busca criatividade e diversão, a análise de Split Fiction pode oferecer insights interessantes sobre como diferentes elementos podem se unir para criar algo único.
Como os impactos das tecnologias se entrelaçam, entender as funcionalidades do Angular 19.1.6 é fundamental para desenvolvedores que buscam otimizar suas aplicações.
Para desenvolvedores que utilizam equipamentos Apple, vale a pena verificar se o iOS 18.4 já está disponível para desenvolvedores, permitindo explorar as novidades e otimizações do sistema.
Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.
Via Dev.to