Por que eu devo ler este artigo:Neste artigo vamos falar um pouco sobre a Interação entre componentes no Angular, que nada mais é do que uma forma de trocar informações entre componentes durante a execução da aplicação.

Introdução

No Angular a interação entre componentes é uma técnica que permite aos componentes trocarem informações entre si. Durante este artigo nós utilizaremos dois componentes, pai e filho, que servirão como base para os diversos exemplos que serão apresentados e que nos ensinarão técnicas de comunicação entre componentes. Esses componentes serão utilizados apenas a nível de exemplo, para que tenhamos como demonstrar tais técnicas. Por isso, começaremos criando um projeto com esses dois componentes e depois faremos modificações em seus códigos a fim de que eles troquem informações entre si.

Criando e configurando o projeto

Como vimos, para utilizarmos a técnica de interação entre componentes precisamos de um projeto que possua pelo menos dois componentes, e é isso que criaremos agora.

O primeiro passo é executarmos o código de criação do projeto no CMD/terminal:


ng new interacao-entre-componentes

Quando o projeto for criado, uma mensagem será exibida na tela do console para informar sobre isso.

Projeto criado
Figura 1. Criando o projeto via cmd

Com o projeto criado, precisaremos criar dois componentes, que chamaremos de pai e fiho. Para isso, usaremos os comandos abaixo:


ng generate component pai

ng generate component filho
Componentes criados
Figura 2. Componentes pai e filho criados

Cada componente criado possui uma pasta com quatro arquivos. Para esse artigo, nós utilizaremos apenas dois deles, o com final 'component.ts' e o 'component.html', para cada um dos componentes.

Arquivos utilizados
Figura 3. Arquivos que vamos utilizar de cada componente

Como temos dois componentes no nosso projeto, utilizaremos um total de quatro arquivos durante o artigo, são eles:

  • pai.component.ts - Que vamos chamar de classe do componente pai
  • pai.component.html - Que vamos chamar de template do componente pai
  • filho.component.ts - Que vamos chamar de classe do componente filho
  • filho.component.html - Que vamos chamar de template do componente filho

Com o projeto e os componentes criados, precisamos agora configurar nosso projeto. O processo é bem rápido. Para isso, a primeira coisa que faremos é abrir a classe do componente pai que está localizada dentro da pasta src/app/pai/ do projeto que foi criado e copiar o valor localizado do seletor, conforme mostra a image ...

Quer ler esse conteúdo completo? Tenha acesso completo