Passer des valeurs à un composant

Passer des valeurs à un composant dans Angular est très simple : il suffit de créer des propriétés de type INPUT dans la partie type script de notre composant. C’est ce que nous allons voir tout de suite.

Créons le projet de test

Voici les différentes étapes pour créer notre projet de test :

• Créer le projet avec la commande « ng new » comme vue dans le tuto d’intro.
• Ouvrez ce projet dans Visual Studio Code.
• Créer un nouveau composant avec la commande « ng g c person » afin de créer app-person comme vu dans le tuto sur les composants..
• Modifier app.component.html pour utiliser notre composant app-person comme suit :

<app-person firstname="Nicolas" surname="Giannone"></app-person>
<app-person firstname="Michel" surname="Dupont"></app-person>

A ce stade, le projet ne compilera évidemment pas mais c’est ce que nous aimerions avoir. En effet, nous aimerions pouvoir afficher un certain prénom et un certain nom dans notre composant app-person et ce serait bien que ces infos proviennent du composant parent : app-root.

Créer des propriétés dans un composant

Pour permettre le passage de données d’un composant à un autre, on va utiliser des propriétés INPUT. Modifions donc le fichier person.component.ts comme ceci :

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

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {

  @Input() firstname: string = '';
  @Input() surname: string = '';

  constructor() { }

  ngOnInit(): void {
  }
}

On fait donc ceci :

• On ajoute donc 2 propriétés : firstname et surname.
• On indique que ces propriétés sont en entrée grâce au décorateur @Input()
• et pour pouvoir utiliser ce décorateur, on l’importe au tout début grâce à l’instruction IMPORT.
• Ensuite, on définit le type de chaque propriété après les « : »
• et la valeur par défaut après le « = ».

Voilà à présent le code compile. Par contre ça n’affiche pas encore les valeurs puisque nous n’avons pas encore modifié le code html de notre composant app-person.

Afficher les valeurs des propriétés d’un composant

Pour afficher les valeurs qu’on a passées depuis app-root vers app-person, il suffit d’utiliser ce que nous avons vu dans le tuto sur le binding : {{ }}. Voici donc à quoi va ressembler le code de notre fichier person.component.html :

<p>Bonjour {{firstname}} {{surname}}</p>

A présent, si vous lancez votre projet avec la commande « ng serve » vous pourrez voir vos 2 composants app-person apparaitre et données comme résultat 2 phrases « Bonjour xxx » avec le prénom et nom passés en propriétés du composant.

Résumons tout ça

Si on résumés :

• On passe les valeurs depuis app.component.html à notre composant via de simple attributs (propriétés)
• On les récupère dans notre composant dans la partie ts (person.component.ts) dans des propriétés déclarées comme suit : @Input() nom_propriete: string =  »;
  • @Input signifie qu’on est en mode entrée et qu’on va donc recevoir de l’extérieur des données
  • On a ensuite le nom de la propriété
  • Après les « : » on a le type de la propriété
  • Après le « = » on a la valeur de la propriété
• On affiche les données dans le composant (person.component.html) avec {{ nom_propriete }} simplement.

Voilà, j’espère que cet article vous aura plu. N’hésitez pas à liker, partager et commenter celui-ci et à vous abonner pour ne rien manquer. Je vous dis à très bientôt sur le blog developpemen-web-facile.com.