Compartilhe este conteúdo:

O Angular v18 acaba de ser lançado, trazendo uma série de novas funcionalidades e melhorias que prometem transformar a maneira como desenvolvemos aplicações com este popular framework. Neste post, vamos explorar as principais novidades dessa versão e como você pode aproveitá-las em seus projetos. Vamos começar!

Zoneless Change Detection

O Que É?

Uma das novidades mais empolgantes do Angular v18 é o suporte experimental para detecção de mudanças sem o uso de zone.js, conhecido como Zoneless. Tradicionalmente, o Angular usa zone.js para interceptar eventos assíncronos e acionar a detecção de mudanças. Embora eficaz, essa abordagem pode introduzir problemas de desempenho e complexidade na depuração.

Como Usar?

Para experimentar o Zoneless, você precisa adicionar o provedor provideExperimentalZonelessChangeDetection na configuração de bootstrap da sua aplicação e remover zone.js dos polyfills no arquivo angular.json.

Exemplo de Configuração:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Depois, remova zone.js dos polyfills:

{
  "polyfills": [
    // Remova a linha abaixo
    // "zone.js"
  ]
}

Benefícios do Zoneless

  • Melhor Composabilidade: Facilita a integração com micro-frontends e outros frameworks.
  • Desempenho Aprimorado: Reduz o tempo de renderização inicial e o tempo de execução.
  • Tamanho de Bundle Menor: Carregamento de páginas mais rápido.
  • Depuração Simplificada: Stack traces mais legíveis e depuração mais fácil.

Usando Sinais para Detecção de Mudanças

Os sinais são uma nova maneira de gerenciar o estado em componentes Zoneless.

Exemplo de Componente com Sinais:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello from {{ name() }}!</h1>
    <button (click)="handleClick()">Go Zoneless</button>
  `,
})
export class AppComponent {
  protected name = signal('Angular');

  handleClick() {
    this.name.set('Zoneless Angular');
  }
}

Novo Site Angular.dev

O Angular agora tem um novo site oficial: Angular.dev. Este site oferece uma experiência de usuário moderna e interativa, com tutoriais práticos, playgrounds interativos e uma busca aprimorada. Todos os redirecionamentos do antigo angular.io agora levam para angular.dev.

Material 3: Agora Estável!

O Material 3 foi promovido a estável, trazendo novos componentes e temas. Isso significa que você pode começar a usar as novas funcionalidades do Material 3 em produção.

Exemplo de Uso do Angular Material 3:

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule
  ],
  // ...
})
export class AppModule { }

Melhorias na Renderização do Lado do Servidor

Suporte à Hidratação com i18n

O suporte experimental para a hidratação de blocos de internacionalização (i18n) está disponível no Angular v18, facilitando a construção de aplicações multilíngues com SSR.

Replay de Eventos

O recurso de replay de eventos grava os eventos do usuário durante o carregamento da página e os reproduz após a hidratação, garantindo que as interações do usuário não sejam perdidas.

Exemplo de Ativação do Replay de Eventos:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Outras Melhorias e Novidades

Conteúdo Fallback para ng-content

Agora você pode especificar conteúdo padrão para ng-content, útil quando nenhum conteúdo é fornecido pelo componente pai.

Exemplo de Conteúdo Fallback:

@Component({
  selector: 'app-profile',
  template: `
    <ng-content select=".greeting">Hello </ng-content>
    <ng-content>Unknown user</ng-content>
  `,
})
export class ProfileComponent {}

Uso do Componente:

<app-profile>
  <span class="greeting">Good morning </span>
</app-profile>

Resultado:

<span class="greeting">Good morning </span>
Unknown user

Eventos Unificados de Estado de Controle

As classes FormControl, FormGroup e FormArray agora possuem a propriedade events, permitindo a assinatura de um stream de eventos para rastrear mudanças de valor, estado de toque, status e mais.

Exemplo de Uso:

const nameControl = new FormControl<string | null>('name', Validators.required);
nameControl.events.subscribe(event => {
  // Processar eventos individuais
});

Redirecionamentos de Rotas como Funções

Agora é possível usar funções para redirecionar rotas, permitindo lógica mais complexa baseada no estado de runtime.

Exemplo de Redirecionamento de Rotas:

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
        return `/not-found`;
      }
    },
  },
  { path: "user/:userId", component: OtherComponent },
];

Conclusão

O Angular v18 traz muitas melhorias e novas funcionalidades que facilitam a vida dos desenvolvedores, melhoram a performance e simplificam a experiência de desenvolvimento. Seja você um veterano do Angular ou um novo usuário, há muito o que explorar nesta atualização. Não deixe de conferir o novo site Angular.dev para mais detalhes e tutoriais interativos.

E você, já está usando o Angular v18? Compartilhe suas experiências e dúvidas nos comentários!