first component

resources/docs/docs/premiere-page/app-component.md

 # Le composant app-component
+Ce composant est le composant racine de ton application. 
+On l'appelle souvent le *shell* car c'est celui qui est chargé en premier et c'est celui qui permet de charger les autres.
+
+## Etape 1 : On supprime tout !!!
+Comme tu l'as vu Angular a deja mis plein de choses dans ce composant pour coder ta première page au lancement du projet. 
+Comme le titre de cette section l'indique : on peut tout enlever ! 
+
+Va dans le `app.component.html` et supprime tout ! Mais vraiment tout ! 
+
+## Etape 2 : l'interpolation 
+Dans le fichier `app.component.ts`, Angular a deja mis une variable `title = 'le nom de ton app';`
+Cette variable est accessible depuis le fichier htlm de ton app.component, c'est ce qu'on appelle l'interpolation 😊
+
+A toi de jouer ! Va dans le fichier `app.component.html` et ajoute
+```angular2html
+<h1>Bienvenue sur ma super app : {{title}}</h1>
+```
+> Le html utilise la *double moustache* {{}} pour afficher les variables du ts.
+
+Rend toi sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} et *magiiie*, tu as bien un titre qui prend en compte ta variable ! 
+
+> By the way...
+> Est ce que tu as remarqué que tu n'avais pas a relancer ton projet pour que l'affichage change ? 
+> C'est ce qu'on appelle le **hot reload**

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

 # Ton premier composant
+Comme on le dit souvent, en Angular **tout est composant**
 
-## Disclamer
-On va faire beaucoup de choses, ça va te paraitre un peu compliqué mais pas de panique !
-On est la pour vous aider, et si tu ne comprends pas tout ce n'est pas grave du tout !!
-
-## Intellij
-La base de tout c'est un bon IDE, on te conseille Intellij si tu n'en a pas deja un
-Tu trouvera le lien de téléchargement directement sur leur [site](https://www.jetbrains.com/fr-fr/idea/download)
-
-## Docker
-La base de données  a déjà été remplie et le backend a été codé pour toi :) Pour que les lancer, on a besoin de docker.
-Rend toi sur le [site officel](https://www.docker.com/products/docker-desktop/) pour le télécharger.
-
-## La BDD et le backend
-Tu trouvera le backend [ici](https://gitlab.takima.io/school/formation-angular/angular-lab)
-### 1. Clone le projet
-Place toi dans le repertoire de ton choix sur ton ordinateur et ouvre une interface de commande.
-Tape la commande suivante :
-```bash
-git clone git@gitlab.takima.io:school/formation-angular/angular-lab.git
+Alors ça y est, c'est le moment pour toi de coder ton tout premier composant !!
+
+## En ligne de commande
+Pour générer un composant en angular, on le fait en ligne de commande
+<pre>
+ng generate component <em>navbar</em>
+</pre>
+
+Si tu regardes dans ton arborescence de fichier tu dois bien avoir un nouveau composant qui s'appelle *navbar* comme ça: 
+
+<img src="../assets/navbar-component.png" alt="drawing" width="318"/>
+
+>*navbar* c'est le nom de ton composant ! Tu aurais pu l'appeler *menu* *bar* ou autre ! 
+
+> ng generate composant *quelquechose* c'est un peu long a taper quand on a plein de composants à créer.
+> On utilise souvent le raccourci `ng g c quelquechose`
+
+## On affiche le composant 
+Super le composant est créer, maintenant il faut l'afficher ! 
+Si tu vas dans ton `navbar.component.ts`, tu dois avoir: 
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.scss'
+})
+export class NavbarComponent {
+}
+```
+> 💡 Pour rappel 
+> - le `selector` permet d'injecter ce composant dans les fichier html d'autres composants
+> - le `imports` te permet d'importer tout ce dont tu as besoin pour faire fonctionner le composant
+> - le `templateUrl` relie le ts au fichier html
+> - le `styleUrl` relie le ts au fichier scss
+
+On va utiliser ce qui est indiquer dans `selector` pour injecter notre navbar dans le `app.component`
+
+Rend toi dans le fichier `app.component.html` et supprime la balise `<h1>Bienvenue sur ma super app : {{title}}</h1>`.  
+Maintentant, ajoute 
+```angular2html
+<app-navbar></app-navbar>
+```
+><h2> ⚠️ Peu importe ce que tu utilises dans un composant il faudra l'importer ! </h2>
+
+Rend toi dans le `app.component.ts`: 
+- ajoute le composant `NavbarComponent` dans la liste des imports
+- ajoute l'import en haut du fichier : `import { NavbarComponent } from "./navbar/navbar.component";`
+
+Ton fichier doit ressembler à ça : 
+```ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from "./navbar/navbar.component";
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, NavbarComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
 ```
-### 2. Ouvre le projet dans ton IDE
-### 3. Lance le projet
-Dans le terminal de Intellij lance la commande suivante
-```bash
-docker compose up
+
+Si tu retournes sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} , tu dois avoir:
+<img src="../assets/navbar-works.png" alt="drawing"/>
+
+***Congraaats ton composant fonctionne*** ⭐
+
+## La navbar
+Je ne sais pas si tu te souviens mais au debut des install, on a mis *bootstrap*, une lib qui te permet de faire des composants super rapidement  
+> Tu peux aller checker la doc par [là](https://getbootstrap.com/docs/4.0/components/alerts/){:target="_blank"} pour voir tout ce que tu peux faire avec !!
+
+### ✔️ On vérifie d'abord que bootstrap est bien installé
+
+- Rends toi dans le html de ton composant navbar et supprime la balise `<p>navbar works!</p>`
+- Ajoute un bouton bootstrap :
+```html
+<button type="button" class="btn btn-primary">Primary</button>
 ```
-<br/>
 
-#### Rend toi sur la [documentation](http://localhost:8080/swagger-ui/index.html#/) de ton backend et lance un appel GET pour vérifier que tout fonctionne ⭐
-<br/>
+Tu dois avoir ce bouton qui s'affiche :  
+<img src="../assets/button-primary.png" alt="drawing"/>
+
+> 🥶 Si ton bouton n'est pas bleu, c'est que bootstrap est mal importé ! Appelle nous !
+
+### 🎨 On fait une jolie navbar
+
+On utilise la navbar de bootstrap comme expliquer ici [ici](https://getbootstrap.com/docs/4.0/components/navbar/){:target="_blank"}  
+Tu peux maintenant supprimer ton bouton bleu et le remplacer par: 
+```angular2html
+<nav class="navbar navbar-light navbar-expand bg-light ps-5">
+  <a class="navbar-brand">Navbar</a>
+  <a class="nav-item nav-link" href="#">Accueil</a>
+</nav>
+```
+***Congraaats tu as une jolie navbar !*** ⭐
+
+
+
 
-*Respire un bon coup, tu as fait le plus dur et le plus boring* 💪