Comment passer des données dans un composant Angular?

Comment passer des données dans un composant Angular?

Introduction

Cet article va vous permettre de comprendre comment passer des données dans vos composants Angular 2. Nous allons utiliser tout au long de cet article l’exemple du composant Counter, que vous devez bien connaître si vous avez suivi le starter guide. Sinon je vous invite à le télécharger en vous inscrivant à la newsletter.

 Composant Bindé Stateful

Nous allons créé un composant parent stateful, où nous allons pouvoir modifié notre data initialement passé à notre CounterComponent. 

Dans le starter guide, nous avons enregistré notre CounterComponent dans notre @NgModule. Cette manipulation nous permet d’utiliser des composants enregistrés à l’intérieur de notre module.

Allons dans AppComponent, où nous pouvons déclarer un élément custom dans le template :

 

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div class="app"></div>
` }) export class AppComponent { initialCount: number = 10; }

 

Nous avons besoin de binder la propriété initialCount dans notre composant CounterComponent

Dans le starter guide, nous avons appris à binder des propriétés et à les utliser dans les composants directement. Nous devons donc créer une propriété qu’on nommera count sur notre composant afin de lui passer en paramètre initialCount

 

@Component({
  selector: 'app-root',
  template: `<div class="app"></div>
` }) export class AppComponent { initialCount: number = 10; }

 

Pour récapituler rapidement, nous venons de créé une propriété custom appelé count, pour passer la valeur de initialCount.

 Decorateur @Input, composant stateless

Nous allons maintenant créer un composant stateless, pour passer nos data à l’intérieur de ce composant. Nous pourrons alors modifier les datas passées quand nous voulons et elles seront disponibles dans notre composant.

Allons dans notre Countercomponant :

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

@Component({...})
export class CounterComponent {

  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

}

 

Nous avons un composant totalement isolé concernant ses datas, mais nous pouvons quand même lui passer des datas depuis son appel.

Pour faire cela, nous pouvons importer Input décorateur depuis Angular core, et simplement décorer notre propriété count avec :

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

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

}

 

Le décorateur indique à Angular qu’il traite count comme un input bindé. Vous pouvez remarquer qu’il est possible de donner une valeur par défaut à une propriété input, si la propriété input bindée n’est pas donné dans le selecteur. Ici count = 0

Partagez, si vous aimez

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *