|
Publié le par Chloé MAHALIN

Angular 4

Transmettre une valeur depuis un composant parent vers un composant enfant

Prérequis, comprendre la création d'un nouveau composant dans un projet.

Un composant peut contenir un autre composant, que l'on appellera un composant enfant (Child). Il est possible de communiquer une valeur à l'un des attributs de l'enfant.

Mettons une variable au parent racine, que l'on appellera parentTitle.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    parentTitle: string = "This is a title";

    getParentTitle(): string {
        return "get " + parentTitle;
    }
}

Et déclarons trois instances du composant enfant dans la vue.

Vous remarquerez que nous allons utiliser 3 manières différentes de passer du contenu d'un composant à un autre.

  • La première consiste à passer une simple chaîne de caractères directement.
  • La seconde est le contenu de la variable parentTitle, déclarée dans le model du parent.
  • La dernière appelle une méthode (le getter) du parent. La valeur retournée par la méthode sera transmise au composant enfant.

app.component.html

<div>
    <!-- Ici, on ne passe qu'un champ texte statique, qui n'est pas un attribut du composant parent -->
    <child-selector (title)="'toto'" ></child-selector>

    <!-- Ici, l'attribut title est rempli avec le contenu de la variable parentTitle -->
    <child-selector (title)="parentTitle" ></child-selector>

    <!-- Ici, On peut également passer le résultat d'une fonction à un attribut -->
    <child-selector (title)="getParentTitle()" ></child-selector>
</div>

Pour l'enfant, n'oubliez pas de lui ajouter la dépendance d'input, qui indique au framework que l'attribut peut récupérer une valeur de l'extérieur.

child-component.ts

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

@Component({
  selector: 'child-selector',
  templateUrl: './child-component.html',
  styleUrls: ['./child-component.css']
})
export class MyChildComponent {

    // Input prend toujours des parenthèses. Ne les oubliez pas.
    @Input() title: string;

}

child-component.html

<div>
    <!-- Ceci permet d'afficher le contenu de l'attribut title -->
    {{ title }}
</div>

On n'oublie pas d'enrichir le catalogue de composants !

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MyChildComponent } from './components/child/child-component.ts';

@NgModule({
  declarations: [
    AppComponent, MyChildComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Voici le résultat de ce code :

<div>
    <child-selector>
        <div>
            toto
        </div>
    </child-selector>

    <child-selector>
        <div>
            This is a title
        </div>
    </child-selector>

    <child-selector>
        <div>
            get This is a title
        </div>
    </child-selector>
</div>

Vous constaterez que le selector de l'enfant reste dans le DOM. Mais il peut aussi être masqué.