O Angular, em qualquer versão, trabalha com componentes, o que na minha opinião é uma coisa ótima por permitir reaproveitamento de código.

Até aí tudo bem, trabalhar com componentes é uma coisa ótima, mas surgem outras questões, como, a comunicação entre os componentes.

Pode ser que um evento de clique precise repercutir em outro componente, ou no componente pai (que será tratado em outro post), ou apenas passar para o componente filho um determinado valor, para que ele trate da melhor maneira a apresentação, que é o caso do uso do @Input() do Angular.

Como funciona o @Input() no Angular

Vamos a um exemplo prático para entender melhor esta interação entre os componentes do Angular.

Criando o componente filho, veja:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <h1>{{label}}</h1>
    <p>Este é um componente padrão que pode ser utilizado por outros componente para adicionar o título em uma página.</p>
  `
})
export class TituloChildComponent {
  label: string;
}

Note que o nosso objetivo é tornar o título (atributo label) dinâmico, permitindo alterar o texto para cada componente pai o que utilizar.

Para isso precisamos modificar melhorar o componente adicionando @Input() antes do atributo label. Veja como fica:

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <h1>{{label}}</h1>
    <p>Este é um componente padrão que pode ser utilizado por outros componente para adicionar o título em uma página.</p>
  `
})
export class TituloChildComponent {
  @Input() label: string;
}

Note que importamos o Input do @angular/core, da mesma forma que o Component e adicionamos @Input() antes do label.

Com isso podemos chamar de qualquer componente pai o nosso componente passando o texto que será exibido entre as tags <h1> da seguinte forma:

<app-child label="Meu título"></app-child>

Ou ainda pode utilizar da seguinte forma para passar atributos do componente pai:

<app-child [label]="atrComponentPai"></app-child>

Lembrando que para que tudo funcione corretamente é preciso criar os módulos, importar o módulo do componente filho no componente pai e aí será possível utilizar o componente filho da forma mostrada, mas isso cabe a outro tutorial.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.