Dans cet article, nous allons voir comment utiliser Bootstrap 5 dans nos projets Angular. Bootstrap est une des librairies CSS les plus populaires encore aujourd’hui avec plus de 160k étoiles sur GitHub.


Elle est devenu populaire notamment grâce à son système de grille responsive, à ses classes CSS atomiques et ses composants graphiques.

Bootstrap, c’est aussi du JavaScript !

Il faut savoir que Bootstrap n’est pas seulement une librairie CSS. La librairie fournit des composants dynamiques qui se basent sur Javascript pour fonctionner.


Exemple de composants dynamiques de Bootstrap : Modal, Dropdown, Tooltips, Toasts, Accordion, etc.

Modal de Bootstrap

Pour utiliser ces composants, il faut généralement coder du Javascript natif. Ce que nous ne voulons pas faire dans nos projets Angular.


Nous avons donc besoin d’une librairie Angular qui implémente les composants de Bootstrap en Angular, afin de pouvoir les utiliser.

Librairie Angular : NgBootstrap vs NgxBootstrap

Il existe aujourd’hui deux librairies Angular qui fournissent les composants Bootstrap : NgBootstrap et NgxBootstrap.

Popularité de NgBootstrap et NgxBootstrap

Parmi ces deux librairies, je vous recommande d’utiliser NgBootstrap pour plusieurs raisons :

  • Cela reste la librairie Angular la plus populaire pour Bootstrap, avec 8.2k étoiles sur GitHub contre 5.5k étoiles pour NgxBootstrap.
  • A chaque montée de version de Angular, c’est la librairie NgBootstrap qui s’est toujours mis à jour plus rapidement.
  • Le nombre d’issues de NgBootstrap est inférieur à NgxBootstrap.

Installation de ngBootstrap

Pour installer Bootstrap et NgBootstrap dans notre projet Angular, il nous suffit d’exécuter cette commande.

ng add @ng-bootstrap/ng-bootstrap

Cette commande va installer à la fois la librairie officielle Bootstrap et la librairie Angular NgBootstrap. Nous pouvons voir cela dans le fichier package.json.

"dependencies": {
  ...
  "@ng-bootstrap/ng-bootstrap": "^16.0.0",
  "@popperjs/core": "^2.11.8",
  "bootstrap": "^5.3.2"
},

Fichier package.json

La commande a aussi importé le style de Bootstrap dans le fichier style.scss.

@import 'bootstrap/scss/bootstrap';

Fichier style.scss

Je vous recommande d’utiliser le SCSS dans vos projets Angular car Bootstrap propose des variables SASS (SCSS) qui permettent de customiser le thème de Bootstrap très facilement.

Utilisation des classes CSS de Bootstrap

Nous pouvons dès à présent utiliser les composants de Bootstrap grâce aux classes CSS fournit par la librairie.


On peut par exemple utiliser le système de grille de Bootstrap avec les classes “row” et “col”. Ainsi qu’afficher des boutons avec les classes “btn btn-xxx”.

<div class="row">
  <div class="col">
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
  <div class="col">
    <button type="button" class="btn btn-secondary">Secondary</button>
  </div>
  <div class="col">
    <button type="button" class="btn btn-success">Success</button>
  </div>
</div>

Fichier example.component.html

Voici le résultat, les boutons et la grille de Bootstrap fonctionnent bien !

Boutons Bootstrap sur 3 colonnes

Utilisation des composants de NgBootstrap

Dès que l’on va vouloir des animations, faire apparaitre des éléments dynamiquement, nous allons devoir utiliser la librairie NgBootstrap.


Pour chaque composant dynamique de NgBootstrap, nous devons importer son module pour pouvoir utiliser toutes ses fonctionnalités.

Exemple du Tooltip

Pour utiliser les tooltips de Bootstrap, nous devons tout d’abord importer le NgbTooltipModule de NgBootstrap.

import { NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgbTooltipModule],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss'
})
export class ExampleComponent { }

Fichier example.component.ts

Nous pouvons utiliser la directive ngbTooltip sur notre élément HTML.

<button type="button" class="btn btn-secondary" ngbTooltip="Hello !">
    Secondary
</button>

Fichier example.component.ts

Le tooltip s’affiche bien lorsque l’on passe la souris sur notre élément HTML.

Tooltip de Bootstrap avec NgBootstrap

Exemple de l'Accordion

Pour le composant Accordion, nous devons importer le NgbAccordionModule.

import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgbAccordionModule],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss'
})
export class ExampleComponent { }

Fichier example.component.ts

Dans le cas de l’Accordion, nous devons utiliser plusieurs directives.


N’hésitez pas à aller voir la documentation officiel de NgbBootstrap pour retrouver les directives à utiliser

<div ngbAccordion>
  <div ngbAccordionItem>
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>First</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>Content for the first item</div>
    </div>
  </div>
  <div ngbAccordionItem>
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>Second</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>Content for the second item</div>
    </div>
  </div>
</div>

Fichier example.component.html

Voici le résultat avec notre Accordion qui fonctionne correctement.

Accordion de Bootstrap avec NgBootstrap

Exemple de la Modal

La modal de Bootstrap est sûrement le composant le plus connu de la librairie. Pour l'utiliser, nous devons importer le NgbModalModule et injecter le service NgbModal qui nous permettra d’ouvrir nos modals.

import { NgbModalModule } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgbModalModule],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss'
})
export class ExampleComponent {
  modalService = inject(NgbModal);
}

Fichier example.component.ts

Côté HTML, nous allons créer un ng-template qui correspond à notre modal.

<ng-template #modalTemplate let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Titre de la modal</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
  </div>
  <div class="modal-body">
    Contenu de la modal
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close()">Fermer</button>
  </div>
</ng-template>

Fichier example.component.html

Il ne nous reste plus qu’un bouton pour ouvrir cette modal.

<button type="button" class="btn btn-primary" 
        (click)="modalService.open(modalTemplate)">Open modal</button>

Fichier example.component.html

Voici le résultat, l’ouverture et la fermeture de notre modal fonctionne.

Modal Bootstrap avec NgBootstrap

Customisation du thème Bootstrap

Grâce à ses variables SASS (SCSS), Bootstrap nous permet de facilement customiser le style de ses composants.


Par exemple, si notre application a une couleur principale rouge, nous pouvons l’indiquer à Bootstrap et la couleur rouge va s’appliquer sur tous les composants.

$primary: #c0392b; // Color: Pomegrate red
@import 'bootstrap/scss/bootstrap';

Fichier package.json

Une fois la variable SASS $primary modifiée, tous les composants Bootstrap auront cette nouvelle couleur principale.

Couleur Primary de Bootstrap modifiée

image-formation-angular-seo

Conclusion

Nous avons vu comment mettre en place Bootstrap sur nos projets Angular, grâce à la librairie Angular NgBootstrap qui permet d’utiliser tous les composants dynamiques de Bootstrap.


N’hésitez pas à aller voir la documentation officielle de Bootstrap et de NgBootstrap pour aller plus loin.

Abonnez vous pour ne pas rater les nouveaux articles !

© Gaëtan Rouziès - Tous Droits Réservés