Componentes
Um componente Angular é um pedaço de tela com dono: uma classe TypeScript que carrega os dados e o comportamento, um template que decide o que aparece, e um seletor (app-movie-card) que permite usá-lo como se fosse uma tag HTML nova.
No FlickPicks, MovieCard é um bom exemplo pequeno: recebe um filme via input() e monta a URL do pôster com computed() (assunto da próxima aula). Repare que a classe se chama só MovieCard, sem sufixo — é a convenção mais recente do Angular, a mesma que usamos nos objetos deste curso.
TS
import { Component, input } from '@angular/core';
@Component({
selector: 'app-movie-card',
template: `
<img [src]="posterUrl()" [alt]="item().title" />
<h3>{{ item().title }}</h3>
`,
})
export class MovieCard {
readonly item = input.required<MovieCardItem>();
readonly compact = input(false);
protected readonly posterUrl = computed(
() => `https://image.tmdb.org/t/p/w342${this.item().poster_path}`
);
}Componente, serviço ou página?
Os três são classes Angular, mas têm papéis diferentes — vale saber identificar qual é qual antes de criar um arquivo novo.
| Peça | Papel no FlickPicks |
|---|---|
| Componente | Um bloco visual — MovieCard, Header, MovieRow |
| Serviço | Lógica sem interface — TmdbLists, AuthService |
| Página | Também é um componente, só que ligado a uma rota — Home, Browse |