Angular standalone components

raphaelramos

Raphael Ramos

Posted on April 14, 2023

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

💖 💪 🙅 🚩
raphaelramos
Raphael Ramos

Posted on April 14, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Angular standalone components
angular Angular standalone components

April 14, 2023