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 :
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 :
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 :
Ç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 🙋