Interação entre Componentes em Angular

Passando Dados para o Componente Filho

No tema anterior, vimos como chamar um componente a partir de um componente principal. No entanto, por padrão, esses componentes não interagem entre si; eles são independentes. Cada componente define suas próprias expressões de vinculação. Mas, o que acontece se quisermos vincular as propriedades do componente filho às propriedades do componente principal? Para isso, definimos o seguinte componente filho:

import { Input, Component } from "@angular/core";
@Component({
  selector: "child-comp",
  standalone: true,
  template: `<p>Nome do usuário: {{ userName }}</p>
    <p>Idade do usuário: {{ userAge }}</p>`,
})
export class ChildComponent {
  @Input() userName: string = "";
  @Input() userAge: number = 0;
}

O ponto crucial aqui é a definição das propriedades de entrada usando o decorador @Input(). Naturalmente, para utilizar o decorador, é necessário importá-lo:

import { Input } from "@angular/core";

A característica principal dessas propriedades de entrada é que elas podem ser definidas externamente, ou seja, podem receber valores de fora, como por exemplo, do componente principal.

Agora, vamos modificar o código do componente principal:

import { Component } from "@angular/core";
import { FormsModule } from '@angular/forms';
import { ChildComponent } from './child.component';

@Component({
  selector: "my-app",
  standalone: true,
  imports: [ChildComponent, FormsModule],
  template: `<child-comp [userName]="name" [userAge]="age"></child-comp>
              <input type="text" [(ngModel)]="name" />`
})
export class AppComponent { 
  name = "Tom";
  age = 24;
}

Como a propriedade userName no componente filho foi definida como uma propriedade de entrada com o decorador @Input, no componente principal podemos usá-la como um atributo e, na prática, aplicar a vinculação de propriedades:

<child-comp [userName]="name" [userAge]="age"></child-comp>

O mesmo vale para a propriedade userAge.

Também é importante notar que, para utilizar a vinculação no campo de entrada, precisamos importar o módulo FormsModule.

Assim, as propriedades userAge e userName estarão vinculadas aos valores do componente principal:

Vinculação ao Setter

Além da vinculação a uma propriedade, também podemos configurar a vinculação a um setter no componente filho. Isso pode ser necessário quando o componente filho precisa realizar uma verificação ou até mesmo modificar o valor recebido do componente principal.

Por exemplo, no componente principal, definimos a idade do usuário:

<child-comp [userName]="name" [userAge]="age"></child-comp>
import { Component } from "@angular/core";
import { FormsModule } from '@angular/forms';
import { ChildComponent } from './child.component';

@Component({
  selector: "my-app",
  standalone: true,
  imports: [ChildComponent, FormsModule],
  template: `<child-comp [userName]="name" [userAge]="age"></child-comp>
              <input type="number" [(ngModel)]="age" />`
})
export class AppComponent {
  name = "Tom";
  age = 24;
}

No componente filho, vamos receber a idade passada por meio de um setter:

import { Input, Component } from "@angular/core";
@Component({
  selector: "child-comp",
  standalone: true,
  template: `<p>Nome do usuário: {{ userName }}</p>
    <p>Idade do usuário: {{ userAge }}</p>`,
})
export class ChildComponent {
  @Input() userName: string = "";
  private _userAge: number = 0;

  @Input()
  set userAge(age: number) {
    if (age < 0) {
      this._userAge = 0;
    } else if (age > 100) {
      this._userAge = 100;
    } else {
      this._userAge = age;
    }
  }

  get userAge() {
    return this._userAge;
  }
}

No componente principal, podemos inserir qualquer valor no campo de entrada, incluindo números negativos. No componente filho, o setter verifica o valor inserido e o ajusta se necessário.