- ngx-bootstrap : composants UI pour Angular

Pourquoi ngx-bootstrap ?

Bootstrap est le framework CSS le plus utilisé dans le monde du web. Mais Bootstrap 5 a supprimé jQuery et réécrit ses plugins en JavaScript vanilla — ce qui crée un problème d'intégration avec Angular : les manipulations DOM directes (modals, tooltips, dropdowns pilotés par Bootstrap.js) contournent le cycle de détection de changements d'Angular et peuvent provoquer des bugs subtils.

ngx-bootstrap résout ce problème en réécrivant tous les composants interactifs de Bootstrap directement en TypeScript/Angular. Résultat : vous conservez votre thème Bootstrap 5, vos classes CSS habituelles, mais la logique dynamique passe par des directives et services Angular natifs — sans jQuery, sans bootstrap.js, sans manipulation DOM en dehors d'Angular.

Ce que ngx-bootstrap apporte concrètement

Versions et compatibilité

Pour un projet Angular 17+ (standalone-first), utilisez ngx-bootstrap 12.x avec Bootstrap CSS 5.x.

Installation et configuration

L'installation se fait en deux étapes : la bibliothèque JavaScript ngx-bootstrap et le CSS Bootstrap 5 (qui reste une dépendance séparée).

Installation via npm

# Installation de ngx-bootstrap et du CSS Bootstrap 5
npm install ngx-bootstrap bootstrap

# Vérifiez les versions installées
npm list ngx-bootstrap bootstrap

Ajouter Bootstrap CSS dans angular.json

// angular.json — dans "architect.build.options.styles"
{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ]
}

Configuration NgModule (approche classique)

// app.module.ts — import des modules nécessaires
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Importez uniquement les modules dont vous avez besoin (tree-shakable)
import { ModalModule }      from 'ngx-bootstrap/modal';
import { TooltipModule }    from 'ngx-bootstrap/tooltip';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { TabsModule }       from 'ngx-bootstrap/tabs';
import { AlertModule }      from 'ngx-bootstrap/alert';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,       // requis pour les animations ngx-bootstrap
    ModalModule.forRoot(),         // forRoot() une seule fois à la racine
    TooltipModule.forRoot(),
    BsDatepickerModule.forRoot(),
    PaginationModule.forRoot(),
    TabsModule.forRoot(),
    AlertModule.forRoot(),
  ],
  // ...
})
export class AppModule {}

Intégration standalone Angular

Depuis Angular 17, l'approche recommandée est le mode standalone (sans AppModule). ngx-bootstrap 12 supporte nativement ce pattern : chaque module peut être importé directement dans bootstrapApplication() ou dans le tableau imports d'un composant standalone.

Configuration dans bootstrapApplication()

// main.ts — configuration globale pour toute l'application
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';

// Providers globaux ngx-bootstrap (forRoot équivalent)
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { ModalModule }        from 'ngx-bootstrap/modal';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    // importProvidersFrom est requis pour les modules NgModule
    importProvidersFrom(
      ModalModule.forRoot(),
    ),
    // Configuration globale du datepicker
    {
      provide: BsDatepickerConfig,
      useFactory: () => Object.assign(new BsDatepickerConfig(), {
        dateInputFormat: 'DD/MM/YYYY',
        containerClass: 'theme-dark-blue',
      }),
    },
  ],
});

Import dans un composant standalone

// user-profile.component.ts — composant standalone
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

// Importer les modules ngx-bootstrap dans le composant directement
import { TooltipModule }    from 'ngx-bootstrap/tooltip';
import { AlertModule }      from 'ngx-bootstrap/alert';
import { CollapseModule }   from 'ngx-bootstrap/collapse';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [
    CommonModule,
    TooltipModule,    // directive [tooltip] disponible dans ce composant
    AlertModule,      // composant <alert> disponible
    CollapseModule,   // directive [collapse] disponible
  ],
  templateUrl: './user-profile.component.html',
})
export class UserProfileComponent {}

Modal : fenêtres contextuelles avancées

Le composant Modal de ngx-bootstrap est l'un des plus puissants de la bibliothèque. Il permet d'ouvrir des fenêtres modales basées sur un template ou un composant Angular, de leur passer des données, et de récupérer un résultat à la fermeture.

Ouverture par template (approche simple)

// confirm-dialog.component.ts
import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ModalModule } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-confirm-dialog',
  standalone: true,
  imports: [ModalModule],
  template: `
    <button class="btn btn-danger" (click)="openModal(confirmTemplate)">
      Supprimer l'article
    </button>

    <!-- Template de la modale -->
    <ng-template #confirmTemplate>
      <div class="modal-header">
        <h4 class="modal-title">Confirmer la suppression</h4>
        <button type="button" class="btn-close" (click)="modalRef?.hide()"></button>
      </div>
      <div class="modal-body">
        <p>Cette action est <strong>irréversible</strong>. Confirmer ?</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" (click)="modalRef?.hide()">Annuler</button>
        <button class="btn btn-danger" (click)="confirm()">Supprimer</button>
      </div>
    </ng-template>
  `,
})
export class ConfirmDialogComponent {
  modalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<void>): void {
    // Options : class (taille), backdrop, keyboard
    this.modalRef = this.modalService.show(template, {
      class: 'modal-dialog-centered',
      backdrop: 'static',   // clic extérieur ne ferme pas la modale
      keyboard: false,       // Échap désactivé
    });
  }

  confirm(): void {
    console.log('Suppression confirmée');
    this.modalRef?.hide();
  }
}

Ouverture par composant avec passage de données

// edit-user-modal.component.ts — le contenu de la modale
import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-edit-user-modal',
  standalone: true,
  imports: [FormsModule],
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Modifier {{ userName }}</h4>
    </div>
    <div class="modal-body">
      <input class="form-control" [(ngModel)]="userName" />
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" (click)="save()">Enregistrer</button>
    </div>
  `,
})
export class EditUserModalComponent {
  userName = '';           // initialisée par le parent

  constructor(public bsModalRef: BsModalRef) {}

  save(): void {
    // Émettre le résultat vers le composant appelant
    this.bsModalRef.onHidden?.emit({ updated: this.userName });
    this.bsModalRef.hide();
  }
}

// ---- Dans le composant appelant ----
// this.modalRef = this.modalService.show(EditUserModalComponent, {
//   initialState: { userName: 'Alice' }    // injection de données
// });
// this.modalRef.onHidden.subscribe(result => console.log(result));

Tooltip et Popover

Les directives [tooltip] et [popover] s'ajoutent sur n'importe quel élément HTML pour afficher des bulles d'information, sans aucune configuration JavaScript supplémentaire.

Tooltip — bulle d'aide simple

<!-- Tooltip basique -->
<button class="btn btn-info"
        tooltip="Enregistre vos modifications"
        placement="top">
  Sauvegarder
</button>

<!-- Tooltip avec HTML et délai -->
<span [tooltip]="htmlTooltip"
      [tooltipHtml]="true"
      [delay]="300"
      placement="right"
      class="badge bg-secondary ms-2">
  ?
</span>

<ng-template #htmlTooltip>
  <strong>Raccourci :</strong> Ctrl+S
</ng-template>

Popover — panneau contextuel riche

<!-- Popover avec titre et contenu HTML -->
<button class="btn btn-outline-secondary"
        [popover]="popTemplate"
        popoverTitle="Aide contextuelle"
        placement="bottom"
        [outsideClick]="true">
  Aide
</button>

<ng-template #popTemplate>
  <ul class="list-unstyled mb-0">
    <li>✅ Champ obligatoire</li>
    <li>ℹ️ Format : JJ/MM/AAAA</li>
    <li>⚠️ Doit être dans le futur</li>
  </ul>
</ng-template>

Alerts et notifications

Le composant <alert> de ngx-bootstrap étend les alertes Bootstrap classiques avec la possibilité de fermeture automatique et d'animation de disparition.

Alert dismissible avec timer

// notifications.component.ts
import { Component } from '@angular/core';
import { AlertModule } from 'ngx-bootstrap/alert';
import { CommonModule } from '@angular/common';

interface Notification {
  type: string;
  message: string;
  timeout?: number;
}

@Component({
  selector: 'app-notifications',
  standalone: true,
  imports: [AlertModule, CommonModule],
  template: `
    <alert
      *ngFor="let alert of alerts; let i = index"
      [type]="alert.type"
      [dismissible]="true"
      [dismissOnTimeout]="alert.timeout"
      (onClosed)="removeAlert(i)">
      {{ alert.message }}
    </alert>

    <button class="btn btn-success" (click)="addSuccess()">Succès</button>
    <button class="btn btn-danger ms-2" (click)="addError()">Erreur</button>
  `,
})
export class NotificationsComponent {
  alerts: Notification[] = [];

  addSuccess(): void {
    this.alerts.push({
      type: 'success',
      message: 'Données sauvegardées avec succès !',
      timeout: 3000,   // disparaît après 3 secondes
    });
  }

  addError(): void {
    this.alerts.push({
      type: 'danger',
      message: 'Une erreur est survenue. Veuillez réessayer.',
      // Pas de timeout → reste visible jusqu'à fermeture manuelle
    });
  }

  removeAlert(index: number): void {
    this.alerts.splice(index, 1);
  }
}

Tabs et Accordion

Les composants tabset et accordion permettent d'organiser le contenu en panneaux navigables avec une API déclarative dans le template.

Tabs — navigation par onglets

<!-- Tabset de base avec 3 onglets -->
<tabset>
  <tab heading="Profil" [active]="true">
    <div class="p-3">
      <h5>Informations personnelles</h5>
      <p>Nom, prénom, adresse email…</p>
    </div>
  </tab>

  <tab heading="Sécurité">
    <div class="p-3">
      <h5>Changer le mot de passe</h5>
    </div>
  </tab>

  <tab heading="Notifications" [disabled]="!isPremiumUser">
    <div class="p-3">
      <p>Gérez vos préférences de notifications.</p>
    </div>
  </tab>
</tabset>

Tabs verticaux avec icônes

<!-- Tabs avec orientation verticale -->
<tabset [vertical]="true" type="pills">
  <tab>
    <ng-template tabHeading>
      <span class="me-2">📊</span> Dashboard
    </ng-template>
    <p class="p-3">Contenu du dashboard</p>
  </tab>

  <tab>
    <ng-template tabHeading>
      <span class="me-2">👤</span> Utilisateurs
    </ng-template>
    <p class="p-3">Liste des utilisateurs</p>
  </tab>
</tabset>

Accordion — panneaux expansibles

<!-- FAQ avec accordion -->
<accordion [closeOthers]="true">
  <accordion-group heading="Comment installer ngx-bootstrap ?"
                   [isOpen]="true">
    <p>Exécutez <code>npm install ngx-bootstrap bootstrap</code></p>
  </accordion-group>

  <accordion-group heading="Fonctionne-t-il sans jQuery ?">
    <p>Oui, ngx-bootstrap ne dépend pas de jQuery.</p>
  </accordion-group>

  <accordion-group heading="Compatible Angular standalone ?">
    <p>Oui, depuis la version 12 de ngx-bootstrap.</p>
  </accordion-group>
</accordion>

DatePicker et DateRangePicker

Le DatePicker de ngx-bootstrap est l'un des composants les plus riches : calendrier complet, sélection de plage de dates, navigation par mois/année, et intégration avec Angular Reactive Forms.

DatePicker simple avec Reactive Forms

// reservation.component.ts
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-reservation',
  standalone: true,
  imports: [ReactiveFormsModule, BsDatepickerModule, CommonModule],
  template: `
    <div class="mb-3">
      <label class="form-label fw-bold">Date de réservation</label>
      <input class="form-control"
             type="text"
             placeholder="JJ/MM/AAAA"
             [formControl]="dateCtrl"
             [bsConfig]="bsConfig"
             [minDate]="minDate"
             bsDatepicker>
      <div *ngIf="dateCtrl.touched && dateCtrl.invalid" class="text-danger small mt-1">
        Date obligatoire
      </div>
    </div>
    <p *ngIf="dateCtrl.value">
      Sélectionné : <strong>{{ dateCtrl.value | date:'dd/MM/yyyy' }}</strong>
    </p>
  `,
})
export class ReservationComponent {
  dateCtrl = new FormControl<Date | null>(null, Validators.required);
  minDate  = new Date();   // Interdit les dates passées

  bsConfig: Partial<BsDatepickerConfig> = {
    dateInputFormat: 'DD/MM/YYYY',
    containerClass:  'theme-dark-blue',
    showWeekNumbers: false,
    isAnimated:      true,
  };
}

DateRangePicker — sélection d'une période

<!-- Sélecteur de plage de dates pour un filtre de rapport -->
<input type="text"
       class="form-control"
       placeholder="Du — Au"
       [(ngModel)]="bsRangeValue"
       [bsConfig]="{ rangeInputFormat: 'DD/MM/YYYY', containerClass: 'theme-green' }"
       bsDaterangepicker>

<!-- Affichage du résultat -->
<div *ngIf="bsRangeValue?.length === 2" class="mt-2 alert alert-info">
  Période : {{ bsRangeValue[0] | date:'dd/MM/yyyy' }}
  → {{ bsRangeValue[1] | date:'dd/MM/yyyy' }}
</div>

Thèmes disponibles pour le DatePicker

Pagination

Le composant pagination génère une navigation paginée complète et accessible. Il s'intègre parfaitement avec une source de données Angular (tableau, Observable) pour découper un jeu de résultats.

Pagination sur une liste d'articles

// articles-list.component.ts
import { Component, OnInit } from '@angular/core';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-articles-list',
  standalone: true,
  imports: [PaginationModule, CommonModule],
  template: `
    <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
      <div class="col" *ngFor="let article of pagedArticles">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">{{ article.title }}</h5>
            <p class="card-text text-muted">{{ article.excerpt }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Contrôles de pagination -->
    <pagination
      [totalItems]="articles.length"
      [(ngModel)]="currentPage"
      [itemsPerPage]="itemsPerPage"
      [maxSize]="5"
      [boundaryLinks]="true"
      [rotate]="true"
      previousText="‹ Préc."
      nextText="Suiv. ›"
      firstText="«"
      lastText="»"
      (pageChanged)="onPageChanged($event)">
    </pagination>

    <p class="text-muted small">
      Page {{ currentPage }} / {{ totalPages }}
      — {{ articles.length }} articles
    </p>
  `,
})
export class ArticlesListComponent implements OnInit {
  articles:      Array<{ title: string; excerpt: string }> = [];
  pagedArticles: Array<{ title: string; excerpt: string }> = [];
  currentPage  = 1;
  itemsPerPage = 9;

  get totalPages(): number {
    return Math.ceil(this.articles.length / this.itemsPerPage);
  }

  ngOnInit(): void {
    // Simulation de 50 articles
    this.articles = Array.from({ length: 50 }, (_, i) => ({
      title:   `Article ${i + 1}`,
      excerpt: `Introduction de l'article numéro ${i + 1}…`,
    }));
    this.setPage(1);
  }

  onPageChanged(event: { page: number }): void {
    this.setPage(event.page);
  }

  private setPage(page: number): void {
    const start = (page - 1) * this.itemsPerPage;
    this.pagedArticles = this.articles.slice(start, start + this.itemsPerPage);
  }
}

Carousel

Le Carousel ngx-bootstrap remplace le carrousel Bootstrap.js tout en exposant une API Angular pour contrôler la navigation programmatiquement, écouter les changements de slide et personnaliser les indicateurs.

Carousel de base avec défilement automatique

<!-- carousel-hero.component.html -->
<carousel [interval]="4000"
          [noPause]="false"
          [showIndicators]="true"
          [isAnimated]="true"
          (activeSlideChange)="onSlideChange($event)">

  <slide *ngFor="let slide of slides; let i = index"
         [active]="i === 0">
    <img [src]="slide.image"
         [alt]="slide.title"
         class="d-block w-100"
         style="max-height: 420px; object-fit: cover;">

    <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
      <h3>{{ slide.title }}</h3>
      <p>{{ slide.subtitle }}</p>
    </div>
  </slide>
</carousel>

// carousel-hero.component.ts
slides = [
  { image: 'assets/images/slide1.webp', title: 'Angular 19', subtitle: 'Signal Components et zoneless' },
  { image: 'assets/images/slide2.webp', title: 'ngx-bootstrap', subtitle: 'UI sans jQuery' },
  { image: 'assets/images/slide3.webp', title: 'Bootstrap 5', subtitle: 'Design system universel' },
];

onSlideChange(data: { relatedTarget: number }): void {
  console.log('Slide actif :', data.relatedTarget);
}

Dropdown dynamique

La directive dropdown de ngx-bootstrap gère l'ouverture/fermeture des menus déroulants de façon réactive, avec support des sous-menus, de la fermeture au clic extérieur et du contrôle programmatique.

Dropdown avec actions dynamiques

<!-- actions-menu.component.html -->
<div class="btn-group" dropdown [insideClick]="false">
  <button dropdownToggle
          type="button"
          class="btn btn-outline-primary dropdown-toggle">
    Actions <span class="caret"></span>
  </button>

  <ul *dropdownMenu class="dropdown-menu dropdown-menu-end" role="menu">
    <li role="menuitem" *ngFor="let action of actions">
      <a class="dropdown-item"
         [class.text-danger]="action.danger"
         href="javascript:void(0)"
         (click)="execute(action)">
        {{ action.label }}
      </a>
    </li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem">
      <a class="dropdown-item text-muted" href="javascript:void(0)">
        Voir l'historique
      </a>
    </li>
  </ul>
</div>

// actions-menu.component.ts
actions = [
  { label: 'Modifier',    danger: false },
  { label: 'Dupliquer',   danger: false },
  { label: 'Archiver',    danger: false },
  { label: 'Supprimer',   danger: true  },
];

execute(action: { label: string }): void {
  console.log('Action :', action.label);
}

Bonnes pratiques et thématisation

L'utilisation optimale de ngx-bootstrap repose sur quelques règles qui améliorent les performances, la maintenabilité et la cohérence visuelle de votre application.

1. Lazy-load les modules lourds

// app.routes.ts — lazy loading du module admin qui utilise Modal, Datepicker, etc.
export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent),
    // AdminComponent importe BsDatepickerModule, ModalModule, etc.
    // Ces modules ne sont chargés que si l'utilisateur va sur /admin
  },
];

2. Personnaliser les configs globalement

// main.ts — configuration centralisée pour éviter les répétitions
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { TooltipConfig }      from 'ngx-bootstrap/tooltip';

bootstrapApplication(AppComponent, {
  providers: [
    // Toutes les instances BsDatepickerConfig utilisent ces valeurs par défaut
    {
      provide: BsDatepickerConfig,
      useFactory: () => Object.assign(new BsDatepickerConfig(), {
        dateInputFormat: 'DD/MM/YYYY',
        containerClass:  'theme-dark-blue',
        showWeekNumbers: false,
      }),
    },
    // Tous les tooltips ont un délai de 200ms par défaut
    {
      provide: TooltipConfig,
      useFactory: () => Object.assign(new TooltipConfig(), {
        placement: 'top',
        delay:     200,
      }),
    },
  ],
});

3. Accessibilité : labels ARIA sur les composants interactifs

<!-- Ajouter aria-label sur les contrôles ngx-bootstrap -->
<pagination
  [totalItems]="total"
  [(ngModel)]="page"
  aria-label="Navigation entre les pages de résultats">
</pagination>

<!-- Tooltip : s'assurer que l'info est aussi disponible sans survol -->
<button class="btn btn-icon"
        tooltip="Supprimer cet élément"
        [attr.aria-label]="'Supprimer cet élément'">
  🗑️
</button>

ngx-bootstrap vs Angular Material

Les deux bibliothèques résolvent le même problème (composants UI pour Angular) mais avec des philosophies différentes. Voici un tableau comparatif objectif pour vous aider à choisir.

Conclusion

ngx-bootstrap est la solution idéale pour intégrer les composants Bootstrap dans Angular sans jQuery ni bootstrap.js. En réécrivant la couche interactive en TypeScript/Angular natif, elle garantit la compatibilité avec le cycle de détection de changements, une intégration propre avec Reactive Forms, et un typage complet sur toutes les APIs.

Les composants couverts dans cet article — Modal, Tooltip, Popover, Alert, Tabs, Accordion, DatePicker, Pagination, Carousel et Dropdown — couvrent la grande majorité des besoins UI d'une application Angular classique. Grâce aux imports granulaires et au tree-shaking d'Angular CLI, seuls les modules utilisés se retrouvent dans le bundle final.