Entendendo os componentes Angular

Os componentes são os blocos de construção das aplicações Angular. Nesta lição, você aprenderá sobre componentes e o seu ciclo de vida.

O que é um componente?

Um componente é uma parte da interface do usuário que inclui código HTML, CSS e TypeScript. Ele representa uma parte da interface do usuário da sua aplicação.

Criando um componente

Use o Angular CLI para criar facilmente um componente:

ng generate component my-component

ng generate component my-component

Estrutura do componente

Um componente Angular geralmente tem quatro arquivos principais:

• .html: modelo
• .ts: lógica
• .css: estilos
• .spec.ts: testes

Decorador de componente

O decorador @Component conecta a classe do seu componente ao seu modelo e aos seus estilos.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Ganchos do ciclo de vida

Os componentes Angular têm ganchos do ciclo de vida que permitem executar código em momentos específicos. Entre os ganchos comuns estão ngOnInit() e ngOnDestroy().

Usando ngOnInit()

ngOnInit() é executado depois que o Angular inicializa os dados do componente. Ele é ideal para a configuração inicial:

ngOnInit() {
  console.log('Component initialized!');
}

Exibindo componentes

Use o seletor do seu componente em outros modelos para exibi-lo:

<app-my-component></app-my-component>

Resumo

Você aprendeu sobre componentes, como criá-los e os seus ganchos do ciclo de vida. Excelente trabalho!