Comment passer des données du composant parent au composant enfant dans Angular ?

Dans Angular, une bibliothèque populaire de JavaScript pour créer des applications web à page unique, nous avons généralement besoin de partager des données entre les composants. La question se pose souvent de savoir comment passer des données du composant parent au composant enfant ? La réponse est simple : en utilisant @Input().

@Input() est un décorateur qui fait partie du module @angular/core. Il permet au composant enfant d'accepter des données du composant parent.

Exemple d'utilisation de @Input()

Prenons par exemple deux composants, Parent et Enfant. Supposons que le composant Parent a une propriété appelée parentData et qu'il veut la transmettre au composant Enfant. Voici comment nous pouvons le faire :

Dans le fichier parent.component.ts :

export class ParentComponent {
    parentData = 'Données du composant Parent';
}

Puis, dans le fichier parent.component.html :

<app-enfant [childData]='parentData'></app-enfant>

Dans ce code, nous avons utilisé la syntaxe des crochets [childData] pour lier la propriété parentData du composant Parent au @Input() du composant Enfant.

Ensuite, dans le fichier enfant.component.ts :

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

export class EnfantComponent {
    @Input() childData: string;
}

Ici, nous utilisons le décorateur @Input() pour lier les données provenant du composant Parent.

Le composant Enfant peut maintenant utiliser childData pour accéder aux données transmises par le composant Parent. Ces données peuvent être affichées dans le template du composant Enfant en utilisant la syntaxe d'interpolation {{childData}}.

Bonnes pratiques

Il est préférable de toujours spécifier le type de l'input pour assurer la sécurité du typage. Par exemple, si la donnée est une chaîne de caractères, utilisez @Input() childData: string;.

De plus, il est fortement recommandé de garder les noms des variables claires et compréhensibles. Cela facilite la compréhension de ce à quoi sert la variable et facilite le débogage.

Pour conclure, @Input() est une fonctionnalité puissante de Angular qui permet de passer des données du composant parent au composant enfant de manière efficace et contrôlée.