Angular : Manipulation de données avec @Input et @Output

Manipulation de données et événements avec Angular

Introduction

Angular est un framework populaire pour la construction d’applications web modernes et réactives. L’une des fonctionnalités clés de Angular est sa capacité à manipuler les données et les événements entre composants. Dans cet article, nous allons explorer comment utiliser les directives @Input et @Output pour lier les composants et partager les données entre eux.

1. Handling d’événements

Pour écouter un événement sur un composant, on utilise la syntaxe ()

<my-component (click)="onClick($event)"></my-component>

Dans l’exemple ci-dessus, le composant my-component émettra un événement de type click, qui sera capturé par la méthode onClick du parent.

2. Handling d’événements avec deux-way data binding

Pour maintenir une liaison de données à jour en fonction des entrées utilisateur et d’autres événements, on utilise la syntaxe [()]

<input [(ngModel)]="myName">

Dans l’exemple ci-dessus, le composant input sera lié à la propriété myName du parent. Lorsque l’utilisateur saisira quelque chose dans le champ de texte, la valeur de myName sera mise à jour automatiquement.

3. Utilisation de directives pour template

Les directives commençant par un astérisque (*) indiquent que ce directive traite le composant comme un modèle et ne l’affichera pas comme tel. Par exemple, ngFor utilise le modèle pour chaque élément dans la collection :

<my-component *ngFor="#item of items">
</my-component>

D’autres directives similaires qui fonctionnent sur les modèles plutôt que sur les composants rendus sont *ngIf et *ngSwitch.

4. Utilisation de Location pour l’interaction avec la barre d’adresse

La classe Location est un service qui permet aux applications de communiquer avec la barre d’adresse du navigateur. Selon la stratégie de localisation utilisée, Location ira soit dans le segment de chemin de la barre d’adresse, soit dans le segment hash.

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-component'
})
class AppCmp {
  constructor(_location: Location) {
    _location.go('/foo');
  }
}

5. Utilisation de AsyncPipe pour la gestion des Observables

Le pipe async s’abonne à un Observable ou une promesse et retourne la dernière valeur émise. Lorsqu’une nouvelle valeur est émise, le pipe marquera le composant comme étant à rechecker.

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

6. Affichage de la version actuelle d’Angular

Pour afficher la version actuelle d’Angular, on peut utiliser VERSION du package @angular/core.

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <h2>Current Version: {{ver}}</h2>
  `,
})
export class AppComponent {
  name = 'Angular2';
  ver = VERSION.full;
}

7. Utilisation de la directive CurrencyPipe

La directive CurrencyPipe permet de travailler avec des données en tant que nombres réguliers mais d’afficher une mise en page standardisée (symbole de devise, décimales, etc.) dans la vue.

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>A: {{myMoney | currency:'USD':false}}</p>
    <p>B: {{yourMoney | currency:'USD':true:'4.2-2'}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  myMoney: number = 100000.653;
  yourMoney: number = 5.3495;
}

8. Utilisation de directives et composants

Nous allons maintenant explorer comment utiliser les directives @Input et @Output pour lier les composants et partager des données entre eux.

8.1 Angular 2 @Input et @Output dans un composant imbriqué

Un exemple de directive qui accepte un @Input pour spécifier une limite de clic jusqu’à ce que le bouton soit désactivé :

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

@Component({
  selector: 'limited-button',
  template: `<button (click)="onClick()"
    [disabled]="disabled">
    <ng-content></ng-content>
  </button>`,
  directives: []
})
export class LimitedButton {
  @Input() clickLimit: number;
  @Output() limitReached: EventEmitter<number> = new EventEmitter();
  disabled: boolean = false;
  private clickCount: number = 0;

  onClick() {
    this.clickCount++;
    if (this.clickCount === this.clickLimit) {
      this.disabled = true;
      this.limitReached.emit(this.clickCount);
    }
  }
}

Un exemple de composant parent qui utilise la directive et affiche un message d’alerte lorsque la limite de clic est atteinte :

import { Component } from '@angular/core';
import { LimitedButton } from './limited-button.component';

@Component({
  selector: 'my-parent-component',
  template: `<limited-button [clickLimit]="2"
    (limitReached)="onLimitReached($event)">
    Vous pouvez cliquer dessus deux fois
  </limited-button>`,
  directives: [LimitedButton]
})
export class MyParentComponent {
  onLimitReached(clickCount: number) {
    alert('Bouton désactivé après ' + clickCount + ' clics.');
  }
}

8.2 Exemple d’utilisation de @Input pour lier des composants

Pour utiliser @Input, vous devez l’importer dans votre composant, ajouter la propriété comme attribut du composant et passer les valeurs entre les composants.

// car.component.ts
import { Component, Input } from '@angular/core';
import { CarEntity } from "./car.entity";

@Component({
  selector: 'car-component',
  template: require('./templates/car.html'),
})
export class CarComponent {
  @Input() car: CarEntity;
  constructor() {}
}

// garage.component.ts
import { Component, Input } from '@angular/core';
import { CarEntity } from "./car.entity";
import { CarComponent } from "./car.component";

@Component({
  selector: 'garage',
  template: require('./templates/garage.html'),
  directives: [CarComponent]
})
export class GarageComponent {
  public cars: Array<CarEntity>;
  constructor() {
    var carOne: CarEntity = new CarEntity('renault', 'blue');
    var carTwo: CarEntity = new CarEntity('fiat', 'green');
    var carThree: CarEntity = new CarEntity('citroen', 'yellow');
    this.cars = [carOne, carTwo, carThree];
  }
}

// garage.html
<div *ngFor="let car of cars">
  <car-component [car]="car"></car-component>
</div>

8.3 Utilisation de @Input avec données asynchrones

Lorsque vous devez fetcher des données asynchronement avant de les passer à un composant enfant, vous pouvez utiliser async/await.

// car.component.ts
import { Component, Input } from '@angular/core';
import { CarEntity } from "./car.entity";

@Component({
  selector: 'car-component',
  template: require('./templates/car.html'),
})
export class CarComponent {
  @Input() car: CarEntity;
  constructor() {}
}

// garage.component.ts
import { Component, Input } from '@angular/core';
import { CarEntity } from "./car.entity";
import { CarComponent } from "./car.component";

@Component({
  selector: 'garage',
  template: require('./templates/garage.html'),
  directives: [CarComponent]
})
export class GarageComponent {
  public cars: Array<CarEntity>;
  constructor() {
    this.loadCars().then(() => {});
  }

  loadCars(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        var carOne: CarEntity = new CarEntity('renault', 'blue');
        var carTwo: CarEntity = new CarEntity('fiat', 'green');
        var carThree: CarEntity = new CarEntity('citroen', 'yellow');
        this.cars = [carOne, carTwo, carThree];
        resolve();
      }, 2000);
    });
  }
}

Conclusion

Dans cet article, nous avons exploré comment utiliser les directives @Input et @Output pour lier les composants et partager des données entre eux. Nous avons également vu comment utiliser Location pour l’interaction avec la barre d’adresse et AsyncPipe pour la gestion des Observables. Enfin, nous avons utilisé CurrencyPipe pour afficher une mise en page standardisée pour les valeurs de devise.

Nous espérons que cet article vous aura été utile pour comprendre comment utiliser ces fonctionnalités clés d’Angular.