Aller au contenu

Le @Input

On l'a vu pendant le cours, on peut passer des paramètres d'un composant parent à un composant enfant. Cela permet de rendre notre composant réutilisable !
Pour cela, on utilise le décorateur @Input.


Modification du titre de la navbar

Maintenant qu'on a une jolie navbar, on va remplacer le titre "Navbar" écrit en dur dans le composant par la variable title de l'app.component.ts

Cela se fait en deux étapes :

1. Ajout du @Input dans le NavbarComponent

  • Rends-toi dans le fichier navbar.component.ts
  • Ajoute :
    @Input({ required: true }) title! : string
    

Info

Un @Input est optionnel par défaut. Avec l'option { required: true } on le rend obligatoire d'un point de vue Angular. Avec le ! après le nom de la variable, on le rend obligatoire d'un point de vue TypeScript. Si on ne veut pas le rendre obligatoire, on peut écrire tout simplement @Input() title : string

Attention

N'oublie pas d'importer le Input, si ton IDE ne le fait pas de façon automatique :

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

2. Passage du paramètre dans le composant parent

  • Normalement ton code ne compile plus. Tu devrais avoir une erreur [ERROR] NG8008: Required input 'title' from component NavbarComponent must be specified. [plugin angular-compiler]. En effet, on a ajouté une @Input required.
  • Rends-toi dans le fichier app.component.html
  • Ajoute le property binding [title]="title" dans ton appel au composant navbar

Tu dois avoir ceci :

<app-navbar [title]="title"></app-navbar>

Ça recompile, mais on a rien changé visuellement, non ?

3. Utilisation de l'Input

Va dans le fichier navbar.component.html et remplace le texte "Navbar" écrit en dur par ta variable title.

Info

💡 On se souvient ! Pour afficher une variable TypeScript coté HTML, on utilise les doubles moustaches {{}}

Tip

🤩 Tu peux ajouter le Pipe titlecase à l'intérieur de l'interpolation pour que le texte soit formatté avec une majuscule au début : {{ title | titlecase }} ⚠️ Attention, n'oublie pas l'import TitleCasePipe

Rends-toi sur http://localhost:4200/ et vérifie que le titre que tu as défini est bien affiché dans ta navbar.

🙋‍♀️ Checkpoint time 🙋‍

Appelle-nous pour qu'on valide cette partie !!️