Introduction

Bien maitriser la communication entre composants est essentiel pour aller plus loin sur Angular. Ce concept de communication peut parfois sembler un peu complexe mais une fois que l'on a saisi l'essentiel tout parait plus simple.

Les getters and setters

Avec les getters et les setters vous pouvez observez les changements sur un composant. Vous pouvez également utiliser le décorateur @Input au dessus du get et du set

private _listFilter: string;

get listFilter(): string {
  return this._listFilter;
}

set listFilter(value: string) {
  this._listFilter = value;
}

ViewChild et ViewChildren

Ces éléments permettent de récupérer la référence d'un ou de plusieurs éléments du DOM. Ils sont récupérés une fois que la vue a été initialisée avec ngAfterViewInit.

// Decorator for a single element
@ViewChild('divElementVar') divElementRef: ElementRef;

<!-- Html template -->
<div #divElementVar>{{ pageTitle }}</div>

@Component({
  selector: 'awesome-component',
  template: 'input type="text" #element/>'
})
export class MyAwesomeComponent implements OnInit {
  @ViewChild("element") element;
  
  ngAfterViewInit(): void {
    this.element.nativeElement.focus();
  }
}

// Decorator for several elements
@ViewChildren('divElementVar') divElementRefs: QueryList<ElementRef>;

Partager des données du parent à l'enfant avec le décorateur @Input

Communication du parent à l'enfant. Le parent DOIT contenir le composant enfant.

<!-- Parent template -->
<app-criteria [displayDetail]='includeDetail'></app-criteria>

// Parent component
includeDetails: boolean = true

// Child component
@Input() displayDetail: boolean;

Partager des données du parent à l'enfant avec le décorateur @Output

Communication de l'enfant au parent. Souvent basé sur un évenement

<!-- Parent template -->
<app-criteria (valueChange)='onValueChange($event)'></app-criteria>

// Parent component
onValueChange(value: string) {
  this.performFilter(value)
}

// Child component
@Output() valueChange: EventEmitter<string>();

// Exemples  d'utilisation 
set listFilter(value: string) {
  this.valueChange.emit(value);
}

update(value: string) {
  this.valueChange.emit(value);
}

Ressources

https://www.digitalocean.com/community/tutorials/angular-component-communication