Interação entre Componentes

Nesta lição, você aprenderá como os componentes se comunicam no Angular, especialmente entre componentes pai e filho.

Os componentes frequentemente precisam compartilhar dados. Os componentes pai podem passar dados para os componentes filho usando propriedades de entrada.

Use o decorador @Input() para receber dados de um componente pai:

@Input() userData: string;

No modelo do componente pai, passe dados usando a vinculação de propriedades:

<app-child [userData]="parentData"></app-child>

Os componentes filho se comunicam com o pai usando eventos com o decorador @Output().

Crie um emissor de eventos para enviar dados do filho para o pai:

@Output() dataEvent = new EventEmitter<string>();

Emita eventos a partir do componente filho:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Lide com os eventos emitidos no modelo do componente pai:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Agora você entende como os componentes podem interagir por meio de entradas e saídas no Angular. Continue praticando!