Angular Fundamentals - Componentes

Entenda o coração do Angular e como os componentes estruturam aplicações modernas.

17 de junho de 20265 min de leitura

AngularComponentsFrontendTypeScriptArchitecture

Introdução

Se existe um conceito que define o Angular, ele é o Component.

Toda interface Angular é construída através de componentes organizados em uma árvore hierárquica.

AppComponent
├── HeaderComponent
├── SidebarComponent
├── DashboardComponent
│   ├── UserCardComponent
│   ├── ChartComponent
│   └── TableComponent
└── FooterComponent

Dominar componentes significa entender como o Angular estrutura aplicações, atualiza a interface e organiza responsabilidades.

O que é um Component?

Exemplo:

import { Component } from "@angular/core";
 
@Component({
  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.scss"],
})
export class UserComponent {
  name = "André";
}

Template:

<h1>{{ name }}</h1>

Resultado:

André

Estrutura de um Component

Todo componente Angular possui três partes principais:

Classe

Contém a lógica.

export class UserComponent {
  userName = "André";
 
  changeName() {
    this.userName = "Carlos";
  }
}

Template

Responsável pela interface.

<h1>{{ userName }}</h1>
 
<button (click)="changeName()">Alterar nome</button>

Estilos

Define aparência.

h1 {
  font-size: 2rem;
}

Responsabilidade de um Component

Pergunta:

Qual a responsabilidade de um Component?

Boa prática:

Component
↓
Orquestra a tela
 
Service
↓
Executa regras de negócio

Exemplo ruim

@Component(...)
export class UserComponent {
 
  saveUser() {
    // validações complexas
    // chamadas HTTP
    // transformação de dados
    // regras de negócio
  }
}

Exemplo melhor

@Component(...)
export class UserComponent {
 
  constructor(
    private userService: UserService
  ) {}
 
  saveUser() {
    this.userService.save();
  }
}

Template

O Template é a representação visual do componente.

Interpolação

Exibe valores.

<h1>{{ name }}</h1>

Property Binding

Vincula propriedades.

<img [src]="avatarUrl" />

Event Binding

Captura eventos.

<button (click)="save()">Salvar</button>

Two-Way Binding

<input [(ngModel)]="name" />

Permite leitura e escrita simultânea.

Comunicação entre Classe e View

Essa é uma das bases do Angular.

Classe → View

name = "André";

<h1>{{ name }}</h1>

View → Classe

<button (click)="save()"></button>

save() {
  console.log("Salvou");
}

Fluxo bidirecional

<input [(ngModel)]="name" />

name = "";

Mudanças na View atualizam a classe.

Mudanças na classe atualizam a View.

Árvore de Componentes

Angular organiza componentes em uma estrutura hierárquica.

AppComponent
├── HeaderComponent
├── UserListComponent
│   ├── UserCardComponent
│   ├── UserCardComponent
│   └── UserCardComponent
└── FooterComponent

Isso facilita:

Reutilização
Manutenção
Escalabilidade

Componentes Standalone

A partir do Angular moderno, os componentes podem existir sem NgModules.

@Component({
  standalone: true,
  selector: "app-user",
  templateUrl: "./user.component.html",
  imports: [],
})
export class UserComponent {}

Boas Práticas

Componentes pequenos

Prefira:

UserPage
├── UserHeader
├── UserDetails
└── UserActions

ao invés de:

UserMegaComponent

Evite regras de negócio

Componentes devem focar em interface.

Delegue responsabilidades

Utilize Services.

Nomeie claramente

UserListComponent
UserCardComponent
UserDetailsComponent

Casos de Uso

Perguntas de Entrevista

Pergunta de Entrevista

O que é um Component no Angular?

Fácil

Pergunta de Entrevista

Qual a responsabilidade principal de um Component?

Fácil

Pergunta de Entrevista

Qual a diferença entre Component e Service?

Médio

Pergunta de Entrevista

O que são Standalone Components?

Médio

Pergunta de Entrevista

Como ocorre a comunicação entre Component e Template?

Médio