Partager des informations entre composants sans utiliser @Output() et les services

En Angular, lorsque nous voulons partager des informations entre les composants, nous utilisons généralement le décorateur @Output() ou les services. Le décorateur @Output() nous permet de partager des données d'un composant enfant vers un composant parent. Pour ce qu'il en est des services, ils nous permettent d'avoir accès à une information peu importe la relation entre les composants.

Et si vous appreniez qu'il existe un autre moyen beaucoup plus simple de le faire ?
Ah bon ? 😁

Effectivement, il existe une autre façon encore plus simple d'avoir accès aux informations d'un composant depuis un autre composant.

Il s'agit de l'attribut exportAs. C'est un attribut utilisé sur les directives et donc valable également sur nos composants car un composant est avant tout une Directive.

Supposons que nous ayons un composant PersonComponent qui permet à l'utilisateur de choisir son genre :

@Component({
  selector: 'app-person',
  template: `
    <input type="radio" name="gender" [(ngModel)]="myGender" value="male" /> Male
    <input type="radio" name="gender" [(ngModel)]="myGender" value="female" /> Female
  `,
  exportAs: 'personContext'
})

export class PersonComponent {
    public myGender: string;
}

exportAs: 'personContext' permet d'indiquer que personContext fait référence à la classe PersonComponent lorsque nous voulons l'utiliser dans notre template HTML au moyen d'une variable de référence.

Par la suite, nous avons un autre composant AvatarComponent qui est chargé d'afficher un avatar en fonction du genre de la personne :

@Component({
  selector: 'app-avatar',
  template: `
   <img *ngIf="gender === 'male'" src="avatarMale.jpg" />
   <img *ngIf="gender === 'female'" src="avatarFemale.jpg" />
  `,
})

export class AvatarComponent {
   @Input() gender: string;
}

Pour finir, dans notre composant parent AppComponent par exemple, nous aimerions interagir entre le composant PersonComponent et le composant AvatarComponent. Voici ce qu'il faut faire :

<div>
 <app-avatar [gender]="personContext.myGender"></app-avatar>
</div>
<app-person #person="personContext"></app-person>

#person='personContext' est la variable de référence person qui a pour valeur personContext et qui n'est rien d'autre que la référence de notre composant PersonComponent.
personContext.myGender permet d'avoir accès à la valeur de la variable myGender présent dans le composant PersonComponent.

L'attribut exportAs, nous permet d'avoir accès aux attributs et méthodes publiques de notre composant afin d'interagir avec eux. Nous remarquons que l'information myGender est partagée entre les deux composants sans que nous ayons besoin de @Output() ou d'un service.

En somme, exportAs est un attribut qui nous évite d'injecter un service ou un composant pour partager des informations entre nos composants ainsi que l'utilisation du décorateur @Output().