DEV Community

Cover image for Angular standalone components
Raphael Ramos
Raphael Ramos

Posted on • Updated on • Originally published at raphaelramos.dev

Angular standalone components

Vídeo desenvolvendo na prática:
Vídeo sobre Angular standalone components

A estrutura do Angular é baseada em componentes.
Os Componentes são partes de interface. Blocos compostos por um template, um estilo e uma classe.

Antes do Angular 14 era necessário um módulo, que é um mecanismo para agrupar components, directives, pipes e services relacionados.

Mas agora com as APIs do standalone components, pode ser totalmente independente, deixando NgModule opcional, o que torna a criação de aplicativos Angular mais simplificada.

Os módulos não foram descontinuados e ainda podem ser usados. Inclusive é possível usar componentes com módulos e sem na mesma aplicação.
Eu tenho criados novos componentes das aplicações com essa API, mas ainda não migrei as anteriores.

Etapas executas no vídeo:

Criamos o projeto

ng new angular-standalone
Enter fullscreen mode Exit fullscreen mode

Criamos o componente verses passando a flag --standalone

ng generate component verses --standalone
Enter fullscreen mode Exit fullscreen mode

Ao usar a flag, foi criado nosso componente sem o arquivo de módulos e com o sinalizador standalone: true e imports dentro do arquivo de componente.

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule],
  providers: [],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})
Enter fullscreen mode Exit fullscreen mode

Também criamos o serviço chamado verses na mesma pasta para consumo da API

ng generate service verses/verses
Enter fullscreen mode Exit fullscreen mode
@Injectable({
  providedIn: 'root'
})
export class VersesService {

  constructor(private httpClient: HttpClient) { }

  getVerse(): Observable<Verse> {
    return this.httpClient.get<Verse>('https://www.abibliadigital.com.br/api/verses/nvi/sl/23').pipe(take(1));
  }
}
Enter fullscreen mode Exit fullscreen mode

Vamos adicionar o serviço e modulo HttpClientModule no nosso componente

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  providers: [VersesService],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})
Enter fullscreen mode Exit fullscreen mode

Para carregar a rota desse componente em lazy loading, o que faz carregar apenas ao acessar a rota, usamos o loadComponent;

{
    path: '',
    title: 'Verses',
    loadComponent: () => import('./verses/verses.component')
    .then(c => c.VersesComponent)
  }
Enter fullscreen mode Exit fullscreen mode

Se você está em uma versão do Angular anterior a 13, recomendo o upgrade devido a ganhos de performance que essa versão traz.
Na versão 14 foi introduzido principalmente o standalone components, e se tornou estável na versão 15.

GitHub Projeto

Top comments (0)