Ton premier composant
Comme on le dit souvent, en Angular tout est composant.
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 grâce à l'Angular CLI (ng) :
Si tu regardes dans ton arborescence de fichier, tu dois bien avoir un nouveau composant qui s'appelle navbar comme ça :Info
navbar c'est le nom de ton composant ! Tu aurais pu l'appeler menu, bar ou autre !
Tip
ng generate component componentName
c'est un peu long à taper quand on a plein de composants à créer.
On utilise souvent le raccourci ng g c componentName
.
On affiche le composant
Super le composant est créé, maintenant il faut l'afficher !
Si tu vas dans ton navbar.component.ts
, tu dois avoir :
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'utiliser ce composant dans les fichiers HTML d'autres composants - le
imports
te permet d'importer tout ce dont tu as besoin pour faire fonctionner le composant - le
templateUrl
indique où se trouve le fichier HTML - le
styleUrl
indique où se trouve le fichier SCSS
On va utiliser le nom indiqué dans selector
pour utiliser notre navbar dans le AppComponent
.
Rends-toi dans le fichier app.component.html
et supprime la balise <h1>Bienvenue sur ma super app : {{title}}</h1>
.
Maintenant, ajoute :
On a une erreur de compilation : regarde sur ton localhost, tu vois le soucis ?
Peu importe ce que tu utilises dans un composant, il faudra l'importer !
Rends-toi dans le app.component.ts
:
- ajoute le composant
NavbarComponent
dans la liste des imports - ajoute bien l'import en haut du fichier
Ton fichier doit ressembler à ça :
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 {...}
Tip
Si tu utilises un IDE, il peut faire les imports automatiquement si tu commences par écrire la classe.
Si tu retournes sur http://localhost:4200/ , tu dois avoir:
Congraaats ton composant fonctionne ! ⭐
La navbar
Je ne sais pas si tu te souviens, mais au début des installations, on a mis Bootstrap, une librairie qui te permet de faire de beaux composants super rapidement en ajoutant du style.
Info
Tu peux aller voir la documentation pour voir tout ce que tu peux faire avec cette librairie !!
✔️ On vérifie d'abord que Bootstrap est bien installé
- Rends-toi dans
navbar.component.html
et supprime la balise par défaut<p>navbar works!</p>
- Ajoute un bouton et met lui une classe Bootstrap :
Tu dois avoir ce bouton qui s'affiche :
Bug
🥶 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 expliqué dans leur documentation.
Tu peux maintenant supprimer ton bouton bleu d'exemple et le remplacer par une vraie navbar :