On l'a vu pendant le cours, on peut passer des parametres d'un composant parent à un composant enfant
Pour cela on utilise l'annotation `@Input`
## Modification du titre de la navbar
Maintenant qu'on a une jolie navbar, on remplacer le "Navbar" écrit en dur dans le composant par la varibale `title` setter dans le ts de l'`app.component`
Cela se fait en deux étapes :
### 1. Ajout du `@Input` dans le composant `navbar`
- Rend toi dans le fichier `navbar.component.ts`
- Ajoute :
```ts
@Input({required:true})title!:string
```
> ❗Un `@Input` est optionnel par défaut. Avec le { required: true } et le ! après le nom de la variable, on le rend mandatory
> Si on ne veut pas le rendre mandatory on peut écrire `@Input() title : string`
> N'oublie pas d'importer le `Input` si ton IDE ne le fait pas de façon automatique
> ```
> import { Input } from '@angular/core';
> ```
- Va dans le fichier `navbar.component.html` et remplace le texte "Navbar" écrit en dur par ta variable `title`
> 💡 On se souvient ! Pour afficher une variable du ts dans le html, on utilise les *doubles moustaches* {{}}
> 🤩 Tu peux ajouter le `| titlecase` à l'intérieur des {{}} pour le texte s'écrive avec une majuscule au début.
> ⚠️ Attention, n'oublie pas l'import
### 2. Passage du param dans le composant parent
- Rend toi dans le fichier `app.component.html`
- Ajoute `[title]="title"` dans la balise de ta navbar
Tu dois avoir ceci :
```
<app-navbar [title]="title"></app-navbar>
```
Rend toi sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} et vérifie que le titre de ton app est bien affiché dans ta navbar
> <h1> 🙋♀️ Checkpoint time 🙋♂️
> Appelle nous pour qu'on valide ton taff !!️ </h1>
