Um dos conceitos importantes que o Angular traz para criação de aplicativos é a comunicação entre componentes.

Existem algumas formas de fazer essa comunicação e algumas técnicas que nos auxiliam nesta comunicação vamos abordar nesse texto as principais formas de fazer isso.

Comunicação entre componente pai para filho

Nessa técnica fazemos que informações de um componente pai sejam configuradas/carregadas no componente filho no momento da criação do mesmo. Novamente o databind do angular pode ser usado para fazer o update de informações entre os componentes.

Para termos informações do pai adicionadas ao filho usamos o decorator @Input() no filho.

Vamos criar um componente filho que vai apresentar números na tela de uma faixa configurável a partir de um start e end.

Arquivo filho.component.html:

<p>Filho</p>

<p>
    <a *ngFor="let i of numeros">{{i}}</a>
</p>

Arquivo filho.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-filho',
  templateUrl: './filho.component.html',
  styleUrls: ['./filho.component.css']
})
export class FilhoComponent implements OnInit{

  start = 0
  end =  10

  numeros: number[] = []

  integers: number [] = []

  ngOnInit(): void {
    this.createNumeros()
  }

  createNumeros() {
    for(let i = this.start; i <= this.end; i++) {
      this.numeros.push(i);
    }
  }
}

Aqui configuramos os dois itens que podem ser criados pelo pai. Colocamos valores padrões que iniciam em 0 e finalizam em 10. Para configurar o componente filho temos no pai a instanciação do app-filho:

Arquivo pai.component.html:

<app-filho [start]="3" [end]="5"></app-filho>

O uso do databind ([]) só é necessário pois o tipo do dado é numérico, caso fosse string não seria necessário. Você pode usar variáveis no componente pai para preencher os dados do filho.

O angular permite interceptar a mudança de valores e trabalhar neles, por exemplo, podemos incrementar ou decrementar os valores de start e end e assim modificar o array de inteiros inicial. Vamos verificar o código abaixo:

Arquivo pai.component.html:

<h1>Componente Pai</h1>

<button type="button" (click)="incrementarStart()">Incrementar start</button> <br />
<button type="button" (click)="incrementarEnd()">Incrementar end</button> <br />

<app-filho [start]="start" [end]="end"></app-filho>

Arquivo pai.component.ts:

import { Component } from '@angular/core';

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

  start = 0
  end = 10

  incrementarStart() {
    this.start++
  }

  incrementarEnd() {
    this.end++
  }
}