Liaison d'événements bidirectionnelle dans Angular

Dans Angular, il est également possible de créer une liaison bidirectionnelle d'événements des deux composants : parent et enfant. Créons dans le modèle HTML enfant une entrée avec une liaison bidirectionnelle du nom d'utilisateur et une fonction modifiant le nom :

<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

Passons à notre composant enfant et importons-y le décorateur @Input. Il est nécessaire pour travailler avec les entrées :

import { Component, Input, Output, EventEmitter } from '@angular/core';

Ensuite, lions le décorateur @Input au nom d'utilisateur. Et le décorateur @Output est lié à l'objet userNameChange, qui sera appelé dans la fonction onNameChange :

export class UserComponent {
	@Input() userName: string = '';
	@Output() userNameChange = new EventEmitter<string>();
	onNameChange(model: string) {
		this.userName = model;
		this.userNameChange.emit(model);
	}
}

Maintenant, passons au composant principal et ajoutons à sa classe la propriété nom :

export class AppComponent {
	name: string = 'alex';
}

Et dans le modèle HTML du composant parent, effectuons la liaison bidirectionnelle de la propriété userName avec la valeur de la propriété name du composant parent :

<user-data [(userName)]="name"></user-data>
<p>You choose name: {{ name }}</p>

Implémentez la liaison bidirectionnelle d'événements des composants parent et enfant selon l'exemple donné dans la leçon.

Sur la base de la tâche précédente, réalisez une liaison bidirectionnelle de l'âge de l'utilisateur.