navbar component

resources/docs/docs/premiere-page/input.md

+# Le @Input
+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>

resources/docs/docs/premiere-page/navbar.md

@@ -69,6 +69,8 @@ import { NavbarComponent } from "./navbar/navbar.component";
 export class AppComponent {
 ```
 
+> Si tu utilises l'IDE Intellij, il peut faire les imports automatiquement
+
 Si tu retournes sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} , tu dois avoir:
 <img src="../assets/navbar-works.png" alt="drawing"/>
 

resources/docs/mkdocs.yml

@@ -15,6 +15,7 @@ nav:
   - Ta première page:
       - Le app-component: 'premiere-page/app-component.md'
       - Ton premier composant: 'premiere-page/navbar.md'
+      - Le @Input: 'premiere-page/input.md'
   - Ruban de LEDs:
       - Les Rubans: 'ruban-led/index.md'
       - Communiquer avec l'application: 'ruban-led/create_project.md'