Anatomia de um component

Todo component deve ter:

• Uma classe TypeScript com comportamentos como manipulação de entrada do usuário e busca de dados de um servidor
• Um template HTML que controla o que é renderizado no DOM
• Um seletor CSS que define como o component é usado no HTML

Você fornece informações específicas do Angular para um component adicionando um decorator @Component no topo da classe TypeScript:

@Component({  selector: 'profile-photo',  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,})export class ProfilePhoto { }

Para detalhes completos sobre como escrever templates Angular, incluindo data binding, manipulação de eventos e controle de fluxo, consulte o guia de Templates.

O objeto passado para o decorator @Component é chamado de metadata do component. Isso inclui o selector, template e outras propriedades descritas ao longo deste guia.

Components podem opcionalmente incluir uma lista de estilos CSS que se aplicam ao DOM daquele component:

@Component({  selector: 'profile-photo',  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,  styles: `img { border-radius: 50%; }`,})export class ProfilePhoto { }

Por padrão, os estilos de um component afetam apenas os elementos definidos no template daquele component. Consulte Estilizando Components para detalhes sobre a abordagem do Angular para estilização.

Você pode alternativamente optar por escrever seu template e estilos em arquivos separados:

@Component({  selector: 'profile-photo',  templateUrl: 'profile-photo.html',  styleUrl: 'profile-photo.css',})export class ProfilePhoto { }

Isso pode ajudar a separar as preocupações de apresentação de comportamento em seu projeto. Você pode escolher uma abordagem para todo o seu projeto, ou decidir qual usar para cada component.

Tanto templateUrl quanto styleUrl são relativos ao diretório no qual o component reside.

Usando components

Imports no decorator @Component

Para usar um component, directive ou pipe, você deve adicioná-lo ao array imports no decorator @Component:

import {ProfilePhoto} from './profile-photo';@Component({  // Import the `ProfilePhoto` component in  // order to use it in this component's template.  imports: [ProfilePhoto],  /* ... */})export class UserProfile { }

Por padrão, components Angular são standalone, o que significa que você pode adicioná-los diretamente ao array imports de outros components. Components criados com uma versão anterior do Angular podem, em vez disso, especificar standalone: false em seu decorator @Component. Para esses components, você deve importar o NgModule no qual o component está definido. Consulte o guia completo do NgModule para detalhes.

Important: Nas versões do Angular anteriores à 19.0.0, a opção standalone tem como padrão false.

Mostrando components em um template

Todo component define um seletor CSS:

@Component({  selector: 'profile-photo',  ...})export class ProfilePhoto { }

Consulte Seletores de Components para detalhes sobre quais tipos de seletores o Angular suporta e orientações sobre como escolher um seletor.

Você mostra um component criando um elemento HTML correspondente no template de outros components:

@Component({  selector: 'profile-photo',})export class ProfilePhoto { }@Component({imports: [ProfilePhoto],template: `<profile-photo />`})export class UserProfile { }

O Angular cria uma instância do component para cada elemento HTML correspondente que encontra. O elemento DOM que corresponde ao seletor de um component é referido como o elemento host daquele component. O conteúdo do template de um component é renderizado dentro de seu elemento host.

O DOM renderizado por um component, correspondente ao template daquele component, é chamado de view daquele component.

Ao compor components dessa maneira, você pode pensar em sua aplicação Angular como uma árvore de components.

Essa estrutura de árvore é importante para entender vários outros conceitos do Angular, incluindo injeção de dependência e consultas filhas.