Instalación de NgBootstrap

Integración con NgBootstrap

NgBootstrap es una biblioteca de componentes UI que adapta Bootstrap 5 para Angular, proporcionando componentes nativos de Angular sin dependencias de jQuery. Esta integración permite utilizar todos los componentes de Bootstrap como directivas y componentes Angular modernos.

Instalación básica

Para integrar NgBootstrap en un proyecto Angular, necesitamos instalar tanto la librería como Bootstrap:

npm install @ng-bootstrap/ng-bootstrap bootstrap

La instalación incluye dos paquetes esenciales: NgBootstrap que proporciona los componentes Angular y Bootstrap que aporta los estilos CSS base.

Configuración de estilos

Después de la instalación, debemos importar los estilos de Bootstrap en el archivo src/styles.css del proyecto:

@import '~bootstrap/dist/css/bootstrap.min.css';

Esta importación proporciona todas las clases CSS de Bootstrap necesarias para que los componentes de NgBootstrap funcionen correctamente con su apariencia visual característica.

Importación en componentes standalone

En Angular 20, al trabajar con componentes standalone, cada componente debe importar directamente los módulos de NgBootstrap que necesite. Por ejemplo, para usar modales:

import { Component } from '@angular/core';
import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgbModalModule],
  template: `
    <button class="btn btn-primary" (click)="openModal()">
      Abrir Modal
    </button>
  `
})
export class ExampleComponent {
  constructor(private modalService: NgbModal) {}
  
  openModal() {
    // Lógica del modal
  }
}

Importaciones por funcionalidad

NgBootstrap organiza sus componentes en módulos específicos que se importan según necesidad:

• NgbAccordionModule - Para acordeones expandibles
• NgbModalModule - Para ventanas modales
• NgbDropdownModule - Para menús desplegables
• NgbTooltipModule - Para tooltips informativos
• NgbCarouselModule - Para carruseles de imágenes
• NgbDatepickerModule - Para selectores de fecha

Ejemplo de integración completa

Un ejemplo práctico mostrando la integración de múltiples componentes:

import { Component } from '@angular/core';
import { 
  NgbAccordionModule,
  NgbDropdownModule,
  NgbTooltipModule 
} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    NgbAccordionModule,
    NgbDropdownModule, 
    NgbTooltipModule
  ],
  template: `
    <div class="container mt-4">
      <button 
        class="btn btn-info mb-3" 
        ngbTooltip="Información adicional">
        Botón con Tooltip
      </button>
      
      <div class="dropdown mb-3" ngbDropdown>
        <button class="btn btn-outline-primary" 
                ngbDropdownToggle>
          Menú Opciones
        </button>
        <div class="dropdown-menu" ngbDropdownMenu>
          <button class="dropdown-item">Opción 1</button>
          <button class="dropdown-item">Opción 2</button>
        </div>
      </div>
      
      <ngb-accordion>
        <ngb-panel>
          <ng-template ngbPanelContent>
            <p>Contenido del acordeón integrado con Bootstrap.</p>
          </ng-template>
        </ngb-panel>
      </ngb-accordion>
    </div>
  `
})
export class DashboardComponent {}

Ventajas de la integración

La integración con NgBootstrap ofrece beneficios específicos para proyectos Angular:

• Compatibilidad nativa - Los componentes están diseñados específicamente para Angular
• Tree-shaking optimizado - Solo se incluye el código de componentes utilizados
• TypeScript completo - Tipado estricto en todas las APIs
• Sin dependencias externas - No requiere jQuery ni JavaScript de Bootstrap
• Compatibilidad con Signals - Funciona perfectamente con las nuevas primitivas reactivas de Angular

La integración resulta directa y eficiente, permitiendo aprovechar el ecosistema Bootstrap manteniendo las mejores prácticas de Angular moderno.