Aller au contenu

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) :

ng generate component navbar
Si tu regardes dans ton arborescence de fichier, tu dois bien avoir un nouveau composant qui s'appelle navbar comme ça :

navbar-component

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 :

<app-navbar></app-navbar>

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:

navbar_works

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 :
    <button type="button" class="btn btn-primary">Primary</button>
    

Tu dois avoir ce bouton qui s'affiche :

navbar_works

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 :

<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 !