Informatique
Publié le 05/30/2017, rédigé 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](/university/frameworks/angular/003_add_a_child_to_a_component).

Un composant peut contenir un autre composant

Mettons une variable au parent racine

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.

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

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é.

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité