# 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 :

```typescript
@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 :

```typescript
@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 :

```xml
<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()`.

> Pour plus d'informations👉 [exportAs](https://angular.io/api/core/Directive#exportAs)