Como funcionam os componentes no Angular?

Resposta curta:

No coração do Angular estão os componentes, que formam a base de qualquer aplicação. Cada componente é uma tríade harmoniosa composta por uma classe TypeScript, um template HTML e um estilo CSS. Juntos, eles permitem a criação de interfaces de usuário modulares e reutilizáveis, transformando a maneira como construímos aplicações web.

Resposta Longa:

Componentes no Angular: Estruturando o Desenvolvimento com Clareza

Os componentes são a essência do Angular, proporcionando uma estrutura organizada para o desenvolvimento de aplicações. Eles dividem seu projeto em partes compreensíveis e com responsabilidades claras, garantindo que seu código seja mantível e escalável.

Exemplo de Aplicação de Lista de Tarefas

Vamos imaginar uma aplicação de lista de tarefas organizada como uma árvore de componentes:

• AppTarefas: A base da aplicação.
  • ListaTarefas: Contém a lista de todas as tarefas.
  • MetricasTarefas: Exibe métricas e estatísticas das tarefas.
  • ItemListaTarefas: Representa cada tarefa individual.

Neste guia, exploraremos como criar e utilizar componentes no Angular.

Definindo um Componente

Todo componente no Angular possui quatro elementos principais:

1. Decorador @Component: Configurações do componente.
2. Template HTML: Define o que será renderizado na interface.
3. Seletor CSS: Define como o componente é usado no HTML.
4. Classe TypeScript: Contém o comportamento do componente, como gerenciamento de estado e manipulação de entradas do usuário.

Vamos ver um exemplo simplificado de um componente ItemListaTarefas:

// item-lista-tarefas.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'item-lista-tarefas',
  template: `
    <li>(TAREFA) Ler o Guia Essencial do Angular</li>
  `,
})
export class ItemListaTarefas {
  // Comportamento do componente definido aqui
}

Outros metadados comuns incluem:

• standalone: true: Simplifica a criação de componentes independentes.
• styles: Define os estilos CSS aplicados ao componente.

Aqui está uma versão aprimorada do componente ItemListaTarefas:

// item-lista-tarefas.component.ts
import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'item-lista-tarefas',
  template: `
    <li>(TAREFA) Ler o Guia Essencial do Angular</li>
  `,
  styles: `
    li {
      color: red;
      font-weight: 300;
    }
  `,
})
export class ItemListaTarefas {
  // Comportamento do componente definido aqui
}

Separando HTML e CSS em Arquivos Separados

Para equipes que preferem gerenciar HTML e CSS em arquivos separados, o Angular oferece as propriedades templateUrl e styleUrls.

Usando o componente ItemListaTarefas como exemplo:

// item-lista-tarefas.component.ts
import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'item-lista-tarefas',
  templateUrl: './item-lista-tarefas.component.html',
  styleUrls: ['./item-lista-tarefas.component.css'],
})
export class ItemListaTarefas {
  // Comportamento do componente definido aqui
}

html:

<!-- item-lista-tarefas.component.html -->
<li>(TAREFA) Ler o Guia Essencial do Angular</li>

css:

/* item-lista-tarefas.component.css */
li {
  color: red;
  font-weight: 300;
}

Usando um Componente

A modularidade é uma grande vantagem da arquitetura de componentes, permitindo que componentes sejam reutilizados em outros componentes.

Para usar um componente, você precisa:

1. Importar o componente no arquivo.
2. Adicionar o componente ao array imports.
3. Usar o seletor do componente no template.

Aqui está um exemplo de um componente ListaTarefas importando o componente ItemListaTarefas:

// lista-tarefas.component.ts
import { Component } from '@angular/core';
import { ItemListaTarefas } from './item-lista-tarefas.component';

@Component({
  standalone: true,
  imports: [ItemListaTarefas],
  template: `
    <ul>
      <item-lista-tarefas></item-lista-tarefas>
    </ul>
  `,
})
export class ListaTarefas {}

Anatomia de um Componente

Cada componente no Angular deve ter:

• Uma classe TypeScript: Gerencia o comportamento do componente, como a manipulação de entradas do usuário e a obtenção de dados do servidor.
• Um template HTML: Define o que será renderizado no DOM.
• Um seletor CSS: Define como o componente é utilizado no HTML.

Vamos ver um exemplo de um componente FotoPerfil:

// foto-perfil.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'foto-perfil',
  template: `<img src="foto-perfil.jpg" alt="Sua foto de perfil">`,
})
export class FotoPerfil { }

Componentes podem incluir uma lista de estilos CSS que se aplicam ao DOM do componente:

// foto-perfil.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'foto-perfil',
  template: `<img src="foto-perfil.jpg" alt="Sua foto de perfil">`,
  styles: `img { border-radius: 50%; }`,
})
export class FotoPerfil { }

Você também pode optar por escrever seu template e estilos em arquivos separados para uma melhor organização:

// foto-perfil.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'foto-perfil',
  templateUrl: 'foto-perfil.component.html',
  styleUrls: ['foto-perfil.component.css'],
})
export class FotoPerfil { }

Usando Componentes

Cada componente define um seletor CSS:

// foto-perfil.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'foto-perfil',
  ...
})
export class FotoPerfil { }

Você utiliza um componente criando um elemento HTML correspondente no template de outros componentes:

// perfil-usuario.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'perfil-usuario',
  template: `
    <foto-perfil></foto-perfil>
    <button>Carregar nova foto de perfil</button>`,
  ...,
})
export class PerfilUsuario { }

Angular cria uma instância do componente para cada elemento HTML correspondente que encontrar. O elemento DOM que corresponde ao seletor de um componente é chamado de elemento host desse componente. O conteúdo do template de um componente é renderizado dentro do seu elemento host.

A estrutura em árvore dos componentes é fundamental para entender vários outros conceitos do Angular, incluindo injeção de dependência e consultas de filhos.

Conclusão

Os componentes são a espinha dorsal do Angular, permitindo a construção de aplicações modulares e reutilizáveis. Ao dividir sua aplicação em componentes menores e claramente definidos, você facilita a manutenção, escalabilidade e compreensão do código. Essa abordagem modular também promove a reutilização de componentes, tornando o desenvolvimento mais eficiente e organizado.

Ao aprender a criar, configurar e utilizar componentes no Angular, você estará bem equipado para desenvolver aplicações web robustas e de alta qualidade.

Por que se contentar com esta simples explicação? Continue lendo e se torne um especialista em Angular: O Guia Estelar para Componentes Angular.