@Input & @Output czyli jak współdzielić dane między dyrektywami komponentowymi w Angularze

Z tego artykułu dowiesz się w jaki sposób współdzielić dane między komponentami lub dyrektywami w Angularze. Na początek zdefiniujmy pojęcia @Input oraz @Output:

@Input -> pozwala przekazać dane z komponentu/dyrektywy rodzica do dziecka,

@Output -> pozwala przekazać dane z komponentu/dyrektywy dziecka do rodzica.

Utwórzmy dwa przykładowe komponenty:

ng generate component input-component

ng generate component output-component

input-component.component.ts:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
@Component({
  selector: 'app-input-component',
  templateUrl: './input-component.component.html',
  styleUrls: ['./input-component.component.css']
})
export class InputComponentComponent implements OnInit {
 
  // non-null assertion operator
  @Input() inputValue! : string;
 
  @Output() outputValue = new EventEmitter<string>();
 
  emitEvent(value: string) {
    this.outputValue.emit(value);
  }
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

Powyższy komponent zawiera property:

@Input() inputValue! : string;

co oznacza, że wartość ta będzie przekazana z komponentu nadrzędnego czyli rodzica do dziecka. Co to jednak w praktyce oznacza? W komponencie rodzica czyli output component wartość inputValue zostanie przekazana do komponentu dziecka w następujący oto sposób:

output-component.component.html

<app-input-component inputValue="input value from output component"></app-input-component>

W komponencie input component wyświetlmy z użyciem interpolacji przekazaną wartość:

<p>[{{inputValue}}]</p>

w jaki sposób przekazać wartość z komponentu input component do output component czyli z dziecka do rodzica? W pierwszej kolejności należy w komponencie dziecka input component zadeklarować zmienną (z ang. property) która będzie emitowana do komponentu nadrzędnego – w naszym przypadku nastąpi to po naciśnięciu przycisku:

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

W pliku input-component.component.html zadeklarujmy zatem przycisk po kliknięciu którego zostanie wywołana metoda emitEvent(String) z przykładową wartością:

<button (click)="emitEvent('sample  output value')">emit event from input component</button>

Metoda emitEvent ma za zadanie wyemitować zdarzenie do komponentu rodzica output component z informacją, że wartość property – outputValue –  w komponencie dziecka input component uległa zmianie:

emitEvent(value: string) {
    this.outputValue.emit(value);
}

Zadeklarujmy w selektorze app-input-component (outputValue)=”getOutputValue($event)” w następujący oto sposób:

<app-input-component (outputValue)="getOutputValue($event)" inputValue="input value from output component"></app-input-component>

output-component.component.ts:

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-output-component',
  templateUrl: './output-component.component.html',
  styleUrls: ['./output-component.component.css']
})
export class OutputComponentComponent implements OnInit {
 
  outputValue! : string;
 
  getOutputValue($event: string) {
    this.outputValue = $event;
  }
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Doprecyzujmy wyrażenie:

(outputValue)="getOutputValue($event)"

outputValue – to nazwa zmiennej z komponentu dziecka. Kiedy zostanie wyemitowane zdarzenie z komponentu input component z informacją, że zmienna ta się zmieni to zostanie wywołana metoda:

getOutputValue($event: string)

która przechwyci zmiany z komponentu dziecka. Dodajmy do output-component.component.html z użyciem interpolacji wyświetlenie wartości outputValue.

<p>[{{outputValue}}]</p>