Aula 11

Angular

Mudanças nas ultimas versões do Angular

Angular 14

Standalone Components

O que é?
Antes do Angular 14, todo componente precisava estar declarado em um NgModule. Com os Standalone Components, isso não é mais necessário. Eles são componentes autocontidos e independentes de módulos.

Exemplo 1
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<h2>Olá, Angular Standalone!</h2>`,
})
export class HelloComponent {}
Exemplo 2
import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [MatCardModule],
  template: `
    <mat-card>
      <h3>Usuário</h3>
      <p>Nome: João</p>
    </mat-card>
  `,
})
export class UserCardComponent {}

Formulários Fortemente Tipados (Typed Forms)

A partir do Angular 14, foi introduzida uma nova API que permite tipagem forte em formulários reativos. Isso significa que os valores dos campos são inferidos corretamente pelo TypeScript.

Exemplo 1
import { FormControl, FormGroup, Validators } from '@angular/forms';

interface LoginForm {
  email: FormControl<string>;
  password: FormControl<string>;
}

const loginForm = new FormGroup<LoginForm>({
  email: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
  password: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
});
Exemplo 2
function submitForm(form: FormGroup<LoginForm>) {
  const email: string = form.controls.email.value;
  const password: string = form.controls.password.value;
  console.log(`Email: ${email}, Senha: ${password}`);
}

Angular 17

Signals estáveis

Signals são a nova forma reativa nativa no Angular. Substituem e simplificam o uso do RxJS para a maioria dos casos simples.

Vantagens:
  • Reatividade simples, sem necessidade de subscribe ou async pipe.
  • Melhor desempenho com ChangeDetectionStrategy.OnPush.
Exemplo 1
import { signal } from '@angular/core';
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }
}

No template: {{ count() }}

Sintaxe moderna de controle de fluxo

Agora é possível usar estruturas como @ if, @ for e @ switch diretamente no template, sem precisar de *ngIf ou *ngFor.

Exemplo 1
<ng-container @if="items.length > 0; else vazio">
  <ul>
    <li @for="let item of items">{{ item }}</li>
  </ul>
</ng-container>

<ng-template #vazio>Nenhum item encontrado.</ng-template>

Angular 18 e 19

Standalone Components e Pipes agora são padrão

Desde o Angular 14, os componentes standalone vinham sendo introduzidos. A partir do Angular 18, eles se tornaram o padrão para novos projetos criados com Angular CLI.

O que muda?
  • Novos projetos não usam mais NgModules por padrão.
  • Maior simplicidade na arquitetura.
  • Suporte total a lazy loading, DI, diretivas e pipes standalone.
Exemplo de novo projeto CLI 
ng new minha-app --standalone

Introdução experimental do httpResource()

httpResource é uma nova API para trabalhar com dados remotos de forma declarativa e reativa, facilitando a integração com APIs REST.

Vantagens:
  • Baseado em Signals.
  • Menos boilerplate do que HttpClient.
  • Melhor integração com a renderização reativa.
Exemplo
import { httpResource } from '@angular/core/rxjs-interop';

const usersResource = httpResource({
  fetch: () => fetch('/api/users').then(res => res.json())
});

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      <li *ngFor="let user of usersResource.data()">{{ user.name }}</li>
    </ul>
  `,
})
export class UserListComponent {}

Essa API ainda é experimental, mas sinaliza um futuro mais simples para o consumo de APIs.

Melhorias em Validators e templates

Validações mais tipadas e precisas agora fazem parte do Angular 18:

Exemplo 1
const form = new FormGroup({
  email: new FormControl('', {
    validators: [Validators.required, Validators.email],
    nonNullable: true
  })
});

const emailError = form.controls.email.errors?.['email'];

O editor agora ajuda mais e mostra exatamente o tipo de erro e suas propriedades.