Explorando as opções de criação de componentes em Angular

Por Gaspar Barancelli Junior em 04 de abril de 2024

Em Angular, um componente é uma das principais partes da aplicação. Ele é responsável por encapsular a lógica e a apresentação de uma parte da interface do usuário e pode ser reutilizado em diferentes partes da aplicação. Há diferentes formas de criar um componente em Angular, cada uma com suas vantagens e desvantagens. Neste post, vamos explorar essas formas e ajudá-lo a escolher a melhor para o seu projeto.

Forma 1: Usando a CLI do Angular

A maneira mais comum de criar um novo componente em Angular é usar a CLI do Angular. A CLI é uma ferramenta de linha de comando que permite gerar código para uma nova aplicação ou componente com facilidade.

Para criar um novo componente usando a CLI, basta executar o comando ng generate component <nome-do-componente> no terminal. Isso criará uma pasta com o nome do componente dentro do diretório src/app com todos os arquivos necessários para o componente, incluindo um arquivo HTML, um arquivo TypeScript e um arquivo CSS.

Essa é uma forma simples e rápida de criar um novo componente, especialmente se você já está familiarizado com a CLI do Angular.

Por exemplo, se quisermos criar um componente chamado meu-componente, basta executar o seguinte comando no terminal:

ng generate component meu-componente

Isso criará a seguinte estrutura de arquivos dentro do diretório src/app/meu-componente:

meu-componente
├── meu-componente.component.css
├── meu-componente.component.html
├── meu-componente.component.spec.ts
└── meu-componente.component.ts

O arquivo meu-componente.component.ts contém a lógica do componente, o arquivo meu-componente.component.html contém a apresentação do componente e o arquivo meu-componente.component.css contém o estilo do componente.

Forma 2: Criando manualmente os arquivos do componente

Outra forma de criar um componente é criar manualmente os arquivos do componente. Isso pode ser útil se você quiser entender melhor a estrutura do componente ou se estiver trabalhando em um projeto sem acesso à CLI.

Para criar manualmente um novo componente, você precisará criar um novo diretório com o nome do componente dentro do diretório src/app. Dentro deste diretório, você deve criar um arquivo TypeScript com o nome do componente, um arquivo HTML para a apresentação e um arquivo CSS para o estilo.

Essa forma pode ser mais demorada do que usar a CLI, mas também pode ajudá-lo a entender melhor a estrutura do componente e personalizar o código de acordo com as suas necessidades.

Por exemplo, para criar um componente chamado meu-componente manualmente, basta criar a seguinte estrutura de arquivos dentro do diretório src/app/meu-componente:

meu-componente
├── meu-componente.component.css
├── meu-componente.component.html
└── meu-componente.component.ts

O arquivo meu-componente.component.ts deve conter o seguinte código:

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

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html',
  styleUrls: ['./meu-componente.component.css']
})
export class MeuComponenteComponent {
  // lógica do componente aqui
}

O arquivo meu-componente.component.html deve conter a apresentação do componente:

<!-- apresentação do componente aqui -->

O arquivo meu-componente.component.css deve conter o estilo do componente:

/* estilo do componente aqui */

Forma 3: Usando a herança de classes

Outra forma de criar um componente em Angular é usar a herança de classes. Isso envolve a criação de uma classe base que contém a lógica e a apresentação do componente e, em seguida, estender essa classe em um novo componente.

Essa forma pode ser útil se você quiser reutilizar a lógica e a apresentação de um componente existente em outro componente. No entanto, pode ser um pouco mais difícil de entender do que as outras formas.

Por exemplo, podemos criar uma classe base chamada BaseComponent que contém a lógica e a apresentação do componente e, em seguida, estender essa classe em um novo componente chamado MeuComponente:

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

@Component({
  selector: 'app-base',
  template: `
    <h1>{{titulo}}</h1>
    <p>{{texto}}</p>
  `
})
export class BaseComponent {
  titulo = 'Título do componente';
  texto = 'Texto do componente';
}

@Component({
  selector: 'app-meu-componente',
  template: `
    <app-base></app-base>
    <button (click)="onClick()">Clique aqui</button>
  `
})
export class MeuComponente extends BaseComponent {
  onClick() {
    this.titulo = 'Novo título';
    this.texto = 'Novo texto';
  }
}

No código acima, criamos uma classe base chamada BaseComponent que contém a lógica e a apresentação do componente. Em seguida, criamos um novo componente chamado MeuComponente que estende a classe BaseComponent.

Dentro do componente MeuComponente, usamos o seletor app-base para renderizar o conteúdo do componente base. Também adicionamos um botão que, quando clicado, atualiza o título e o texto do componente base.

Forma 4: Usando a interface ComponentFactory

A quarta forma de criar um componente em Angular é usando a interface ComponentFactory. Essa interface permite criar um objeto que representa um componente e, em seguida, usá-lo para criar uma instância do componente.

Por exemplo, podemos criar um componente chamado MeuComponente usando a interface ComponentFactory da seguinte maneira:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div #container></div>
  `
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(MeuComponente);
    this.container.createComponent(factory);
  }
}

@Component({
  selector: 'app-meu-componente',
  template: `
    <h1>{{titulo}}</h1>
    <p>{{texto}}</p>
  `
})
export class MeuComponente {
  titulo = 'Título do componente';
  texto = 'Texto do componente';
}

No código acima, usamos o seletor app-root para renderizar o componente principal. Dentro desse componente, usamos a diretiva ViewChild para obter uma referência ao elemento que contém o componente e a interface ComponentFactoryResolver para criar um objeto ComponentFactory para o componente MeuComponente.

Em seguida, usamos o método createComponent da referência do elemento para criar uma instância do componente MeuComponente. O componente é renderizado dentro do elemento especificado pelo seletor app-meu-componente.

Forma 5: Usando o Content Projection

O Content Projection é uma técnica que permite criar componentes mais flexíveis e reutilizáveis em Angular. Ele envolve a criação de um componente que pode ser usado como um contêiner para outros componentes.

Usando o Content Projection, você pode criar um componente genérico que pode ser usado para exibir diferentes tipos de conteúdo. Por exemplo, você pode criar um componente que exibe uma lista de itens, mas permite que o usuário defina o conteúdo da lista.

Segue um um exemplo completo de como criar um componente usando a forma de Content Projection em Angular:

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

@Component({
  selector: 'app-meu-componente',
  template: `
    <div>
      <h1>{{ titulo }}</h1>
      <ng-content></ng-content>
    </div>
  `
})
export class MeuComponente {
  titulo = 'Título do componente';
}

No código acima, criamos um componente chamado MeuComponente que usa o seletor app-meu-componente. O template do componente inclui uma tag div que contém o título do componente e o conteúdo inserido por meio de Content Projection.

Para adicionar conteúdo ao componente, basta usar o seletor app-meu-componente e adicionar o conteúdo dentro da tag. Por exemplo:

<app-meu-componente>
  <p>Conteúdo do componente</p>
</app-meu-componente>

O conteúdo inserido dessa maneira é colocado dentro do elemento <ng-content> do template do componente, que permite a inserção dinâmica de conteúdo dentro do componente.

Com a forma de Content Projection, é possível criar componentes mais flexíveis e reutilizáveis que permitem a inserção dinâmica de conteúdo em tempo de execução.

Conclusão

Neste post, exploramos as diferentes formas de criar um componente em Angular. Discutimos como usar a CLI do Angular para gerar código automaticamente, como criar manualmente os arquivos do componente para ter mais controle sobre a estrutura do componente e como usar a herança de classes para reutilizar a lógica e a apresentação de um componente existente.

A escolha da melhor forma de criar um componente depende das necessidades específicas do projeto, da familiaridade com a CLI do Angular e do nível de controle que você deseja ter sobre a estrutura do código. Em resumo, cada forma tem suas vantagens e desvantagens e cabe a você escolher a que melhor se adapta ao seu projeto.