Componentes no Angular: A Base de Aplicações Modulares

1. O Que é um Componente no Angular?

Um componente no Angular é uma classe que controla uma parte específica da interface do usuário. Ele é composto por três partes principais:

• Classe TypeScript: Contém a lógica do componente, como manipulação de dados e interações com a UI.
• Template HTML: Define a estrutura e a aparência da interface controlada pelo componente.
• CSS/Estilos: Define a aparência específica do componente, permitindo a personalização de estilos.

// Exemplo básico de um componente Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-exemplo',
  template: `
    <h1>Olá, Angular!</h1>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class ExemploComponent {}

No exemplo acima, temos um componente chamado ExemploComponent que exibe um título e aplica um estilo básico ao elemento h1.

2. Comunicação Entre Componentes

Em uma aplicação Angular, é comum que componentes precisem se comunicar entre si. Essa comunicação pode ser realizada de várias formas, dependendo do relacionamento entre os componentes:

• @Input: Permite que um componente pai passe dados para um componente filho.
• @Output: Permite que um componente filho envie eventos de volta ao componente pai.

// Exemplo de comunicação entre componentes com @Input e @Output
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-filho',
  template: `
    <p>Nome: {{ nome }}</p>
    <button (click)="enviarMensagem()">Enviar Mensagem</button>
  `
})
export class FilhoComponent {
  @Input() nome: string;
  @Output() mensagemEnviada = new EventEmitter();

  enviarMensagem() {
    this.mensagemEnviada.emit('Olá do componente filho!');
  }
}

@Component({
  selector: 'app-pai',
  template: `
    <app-filho [nome]="nome" (mensagemEnviada)="exibirMensagem($event)"></app-filho>
    <p>Mensagem recebida: {{ mensagem }}</p>
  `
})
export class PaiComponent {
  nome = 'Angular';
  mensagem: string;

  exibirMensagem(mensagem: string) {
    this.mensagem = mensagem;
  }
}

Nesse exemplo, o componente pai passa o valor nome para o componente filho, e o componente filho emite um evento que é capturado pelo pai.

3. Ciclo de Vida dos Componentes

Os componentes Angular possuem um ciclo de vida bem definido, que permite a execução de ações em momentos específicos, como quando o componente é criado, atualizado ou destruído. Os principais métodos do ciclo de vida são:

• ngOnInit: Chamado após a criação do componente.
• ngOnChanges: Chamado quando as propriedades vinculadas ao componente são alteradas.
• ngOnDestroy: Chamado antes da destruição do componente.

// Exemplo de uso dos métodos do ciclo de vida
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-ciclo-vida',
  template: `
    <p>Componente Ciclo de Vida</p>
  `
})
export class CicloVidaComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Componente criado');
  }

  ngOnDestroy() {
    console.log('Componente destruído');
  }
}

No exemplo acima, o método ngOnInit é chamado quando o componente é iniciado, e o método ngOnDestroy é chamado quando o componente é removido da interface.

4. Modularizando Componentes

Em uma aplicação Angular, os componentes são organizados dentro de módulos. Cada módulo pode conter vários componentes e é responsável por agrupar e organizar o código de maneira lógica. O AppModule é o módulo raiz, mas é comum criar módulos específicos para funcionalidades, como SharedModule ou FeatureModule.

// Exemplo de módulo que declara um componente
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ExemploComponent } from './exemplo.component';

@NgModule({
  declarations: [ExemploComponent],
  imports: [BrowserModule],
  bootstrap: [ExemploComponent]
})
export class AppModule {}

Nesse exemplo, o módulo AppModule declara o componente ExemploComponent e define o módulo BrowserModule como uma dependência.

Conclusão

Os componentes no Angular são a base para construir interfaces de usuário dinâmicas e reutilizáveis. Compreender como os componentes se comunicam, como gerenciar seu ciclo de vida e como organizá-los dentro de módulos é essencial para criar aplicações escaláveis e de fácil manutenção. Seguir boas práticas de modularização e reuso de componentes torna o desenvolvimento mais eficiente e organizado.