Tutorial Angular: Instalación y uso de NgBoostrap

¿Qué es NgBootstrap?

NgBootstrap es una biblioteca de componentes de interfaz de usuario (UI) para Angular que proporciona implementaciones nativas de los componentes de Bootstrap sin depender de jQuery o Bootstrap JavaScript. Esta biblioteca ofrece una forma eficiente de integrar la funcionalidad y el estilo de Bootstrap en aplicaciones Angular, aprovechando las capacidades del framework.

NgBootstrap se basa en la versión CSS de Bootstrap, lo que significa que utiliza las clases y estilos de Bootstrap para el diseño y la apariencia, pero reimplementa toda la funcionalidad interactiva en Angular puro. Esto resulta en un mejor rendimiento y una integración más fluida con las aplicaciones Angular.

La biblioteca incluye una amplia gama de componentes, como acordeones, alertas, carruseles, modales, tooltips, popovers, paginación, y muchos más. Estos componentes están diseñados para ser totalmente compatibles con Angular, aprovechando características como la detección de cambios, la inyección de dependencias y el sistema de módulos de Angular.

Algunas de las ventajas clave de usar NgBootstrap incluyen:

1. Compatibilidad nativa con Angular: Los componentes están escritos en TypeScript y utilizan las mejores prácticas de Angular.
2. Sin dependencias externas: No requiere jQuery ni el JavaScript de Bootstrap.
3. Accesibilidad: Los componentes están diseñados teniendo en cuenta la accesibilidad (a11y).
4. Personalización: Permite una fácil personalización de estilos y comportamientos.
5. Tipado fuerte: Proporciona definiciones de tipos TypeScript para una mejor integración con el ecosistema Angular.
6. Mantenimiento activo: La biblioteca se actualiza regularmente para mantenerse al día con las últimas versiones de Angular y Bootstrap.

Instalación de NgBootstrap

Para utilizar NgBootstrap en un proyecto Angular, es necesario instalar tanto la biblioteca NgBootstrap como Bootstrap CSS. Esto permite aprovechar los estilos de Bootstrap mientras se utiliza la funcionalidad proporcionada por NgBootstrap. La combinación de estas tecnologías ofrece una solución robusta y eficiente para crear interfaces de usuario atractivas y responsivas en aplicaciones Angular.

Para instalar NgBootstrap en tu proyecto Angular, sigue estos pasos:

1.- Crea un nuevo proyecto Angular o navega a tu proyecto existente.

2.- Instala Bootstrap y NgBootstrap usando npm:

ng add @ng-bootstrap/ng-bootstrap

Este comando realizará varias acciones:

• Instalará NgBootstrap y sus dependencias.
• Añadirá Bootstrap CSS a tu proyecto.
• Importará el módulo NgbModule en tu AppModule (o configurará para uso standalone).
• Configurará el archivo angular.json para incluir los estilos de Bootstrap.

3.- Si prefieres instalar manualmente, puedes usar estos comandos:

npm install @ng-bootstrap/ng-bootstrap
npm install @angular/localize
ng add @angular/localize

Luego, instala Bootstrap:

npm install bootstrap

4.- Después de la instalación manual, importa NgbModule en tu AppModule (para aplicaciones basadas en módulos):

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
  // ...
})
export class AppModule { }

5.- Revisa si en tu archivo angular.json están los estilos de Bootstrap, si no están, añádelos de la siguiente forma:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

6.- Si estás usando Angular 9 o superior, asegúrate de que el polyfill para zone.js esté incluido en tu archivo polyfills.ts:

import 'zone.js/dist/zone';

7.- Para verificar que la instalación fue exitosa, puedes probar un componente simple de NgBootstrap en tu aplicación. Por ejemplo, añade un botón de alerta en tu componente:

import { Component } from '@angular/core';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  template: `
    <button class="btn btn-primary" (click)="showAlert()">Mostrar Alerta</button>
    @if (showMessage) {
      <ngb-alert (closed)="showMessage = false">
        ¡NgBootstrap funciona correctamente!
      </ngb-alert>
    }
  `,
  standalone: true,
  imports: [NgbAlertModule]
})
export class AppComponent {
  showMessage = false;

  showAlert() {
    this.showMessage = true;
  }
}

Con estos pasos, NgBootstrap debería estar correctamente instalado y listo para usar en tu proyecto Angular. Puedes comenzar a utilizar sus componentes y directivas en tus templates HTML.

En el navegador deberías ver el siguiente botón que al darle clic muestre el mensaje “¡NgBootstrap funciona correctamente!":

8.- NgBootstrap en componentes standalone

1. Importa los módulos específicos de NgBootstrap que necesites en tu componente.
2. Añade estos módulos al array imports de la configuración del componente.

Ejemplo:

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

@Component({
  selector: 'app-my-standalone',
  standalone: true,
  imports: [NgbAlertModule, NgbDropdownModule],
  template: `
    <!-- Tu template usando componentes de NgBootstrap -->
  `
})
export class MyStandaloneComponent {
  // ...
}

Con estos pasos, NgBootstrap debería estar correctamente instalado y listo para usar en tu proyecto Angular, tanto en aplicaciones basadas en módulos como en componentes standalone. Puedes comenzar a utilizar sus componentes y directivas en tus templates HTML, aprovechando las nuevas características de Angular como el uso de @if para control de flujo.

Barra de navegación Navbar con Dropdown

Para crear una barra de navegación (Navbar) con un menú desplegable (Dropdown) utilizando NgBootstrap, seguiremos estos pasos:

1.- En el componente donde deseas implementar la barra de navegación, importa los módulos necesarios:

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
  standalone: true,
  imports: [NgbCollapseModule, NgbDropdownModule]
})
export class NavbarComponent {
  isMenuCollapsed = true;
}

2.- En el archivo HTML del componente, implementa la estructura de la barra de navegación:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi App</a>
    <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
      &#9776;
    </button>
    <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#" (click)="isMenuCollapsed = true">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about" (click)="isMenuCollapsed = true">Acerca de</a>
        </li>
        <li class="nav-item" ngbDropdown>
          <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown1" role="button">
            Dropdown
          </a>
          <div ngbDropdownMenu aria-labelledby="navbarDropdown1" class="dropdown-menu">
            <a ngbDropdownItem href="#" (click)="isMenuCollapsed = true">Acción</a>
            <a ngbDropdownItem href="#" (click)="isMenuCollapsed = true">Otra acción</a>
            <div class="dropdown-divider"></div>
            <a ngbDropdownItem href="#" (click)="isMenuCollapsed = true">Algo más aquí</a>
          </div>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Buscar">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Este código crea una barra de navegación responsive con un logotipo, enlaces de navegación, un menú desplegable y un formulario de búsqueda. Analicemos los elementos clave:

• [ngbCollapse]="isMenuCollapsed": Controla la visibilidad del menú en dispositivos móviles.
• ngbDropdown: Directiva que crea el menú desplegable.
• ngbDropdownToggle: Marca el elemento que actúa como disparador del menú desplegable.
• ngbDropdownMenu: Define el contenido del menú desplegable.
• ngbDropdownItem: Se usa para cada elemento dentro del menú desplegable.

Para personalizar el estilo de la barra de navegación, puedes modificar las clases de Bootstrap o añadir tus propios estilos en el archivo CSS del componente.

Recuerda que para que el menú desplegable funcione correctamente, debes importar NgbDropdownModule en tu módulo:

import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  // ...
  imports: [NgbDropdownModule, /* otros módulos */],
  // ...
})
export class AppModule { }

Con esta implementación, tendrás una barra de navegación funcional con un menú desplegable utilizando NgBootstrap, que se adaptará a diferentes tamaños de pantalla y proporcionará una experiencia de usuario consistente con los estándares de Bootstrap.

Como se vería el código anterior en el navegador:

Este es otro ejemplo personalizado de una barra de navegación con NgBootstrap con Dropdown:

Crear un acordeón de preguntas y respuestas

Para crear un acordeón de preguntas y respuestas utilizando NgBootstrap, seguiremos estos pasos:

Primero, asegúrate de que el módulo NgbAccordionModule esté importado en tu AppModule en aplicaciones basadas en módulos:

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

@NgModule({
  // ...
  imports: [NgbAccordionModule, /* otros módulos */],
  // ...
})
export class AppModule { }

Ahora, en el componente donde deseas implementar el acordeón, crea un array de objetos que contenga las preguntas y respuestas. El siguiente ejemplo de código es en un componente standalone:

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

@Component({
  selector: 'app-faq-accordion',
  standalone: true,
  imports: [NgbAccordionModule],
  templateUrl: './faq-accordion.component.html',
  styleUrl: './faq-accordion.component.css',
})
export class FaqAccordionComponent {
  faqs = [
    { id: 1, question: '¿Qué es Angular?', answer: 'Angular es un framework de desarrollo para construir aplicaciones web SPA (Single Page Applications) mantenido por Google.' },
    { id: 2, question: '¿Qué es TypeScript?', answer: 'TypeScript es un superconjunto tipado de JavaScript que compila a JavaScript puro. Añade características opcionales como tipado estático y orientación a objetos basada en clases.' },
    { id: 3, question: '¿Qué es NgBootstrap?', answer: 'NgBootstrap es una implementación de los componentes de Bootstrap para Angular, que no depende de jQuery ni del JavaScript de Bootstrap.' }
  ];
}

En el archivo HTML del componente, implementa la estructura del acordeón utilizando las directivas de NgBootstrap:

<div ngbAccordion [closeOthers]="true">
  @for (faq of faqs; track faq.id) {
    <div ngbAccordionItem [id]="'panel-' + faq.id">
      <h2 ngbAccordionHeader>
        <button ngbAccordionButton>{{ faq.question }}</button>
      </h2>
      <div ngbAccordionCollapse>
        <div ngbAccordionBody>
          <ng-template>
            {{ faq.answer }}
          </ng-template>
        </div>
      </div>
    </div>
  }
</div>

Analicemos los elementos clave de este código:

• <ngb-accordion>: Es el componente principal del acordeón.
• [closeOthers]="true": Esta propiedad hace que solo un panel pueda estar abierto a la vez.
• <ngbAccordionItem>: Representa cada panel individual del acordeón.
• [id]: Asigna un ID único a cada panel.
• <ngbAccordionHeader>: Establece el título del panel, que en este caso es la pregunta.
• <ng-template>: Define el contenido del panel, que es la respuesta a la pregunta.

Para personalizar el estilo del acordeón, puedes utilizar las clases de Bootstrap o añadir tus propios estilos en el archivo CSS del componente. Por ejemplo:

::ng-deep .accordion {
  margin-top: 20px;
}

::ng-deep .accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #0c63e4;
}

::ng-deep .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,.125);
}

Ten en cuenta que ::ng-deep se utiliza para aplicar estilos a los componentes de NgBootstrap que están encapsulados. Sin embargo, este selector está deprecado y se recomienda buscar alternativas en proyectos a largo plazo.

Con esta implementación, tendrás un acordeón de preguntas y respuestas funcional y accesible utilizando NgBootstrap, que se integrará perfectamente con tu aplicación Angular y proporcionará una experiencia de usuario consistente con los estándares de Bootstrap.

Este ejemplo se vería de la siguiente manera en el navegador:

Crear una tabla de usuarios

Para crear una tabla de usuarios utilizando NgBootstrap en Angular, combinaremos HTML estándar con componentes específicos de NgBootstrap para funcionalidades avanzadas como paginación. NgBootstrap no proporciona un componente de tabla completo, pero ofrece herramientas para mejorar la funcionalidad de las tablas HTML estándar.

Primero, asegúrate de tener importados los módulos necesarios de NgBootstrap en tu componente. Para este ejemplo, usaremos NgbPaginationModule para la paginación.

Comencemos creando un componente para la tabla de usuarios:

import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  lastLogin: Date;
}

const USERS: User[] = [
  { id: 1, name: 'John Doe', email: 'john@ejemplo.com', role: 'Admin', lastLogin: new Date('2023-05-01') },
  { id: 2, name: 'Jane Smith', email: 'jane@ejemplo.com', role: 'User', lastLogin: new Date('2023-05-02') },
  { id: 3, name: 'Bob Johnson', email: 'bob@ejemplo.com', role: 'Editor', lastLogin: new Date('2023-05-03') },
  // Añade más usuarios según sea necesario
];

@Component({
  selector: 'app-user-table',
  standalone: true,
  imports: [
    FormsModule,
    NgbPaginationModule,
    DatePipe
  ],
  templateUrl: './user-table.component.html',
  styleUrl: './user-table.component.css'
})
export class UserTableComponent implements OnInit {
  users = USERS;
  page = 1;
  pageSize = 10;
  collectionSize = USERS.length;

  constructor() {}

  ngOnInit(): void {
    this.refreshUsers();
  }

  refreshUsers() {
    this.users = USERS
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }
}

Ahora, creamos el template HTML para la tabla:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Email</th>
      <th scope="col">Rol</th>
      <th scope="col">Último acceso</th>
    </tr>
  </thead>
  <tbody>
    @for (user of users; track user.id) {
      <tr>
        <th scope="row">{{ user.id }}</th>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.role }}</td>
        <td>{{ user.lastLogin | date:'dd/MM/yyyy HH:mm' }}</td>
      </tr>
    }
  </tbody>
</table>

<div class="d-flex justify-content-between p-2">
  <ngb-pagination
    [collectionSize]="collectionSize"
    [(page)]="page"
    [pageSize]="pageSize"
    (pageChange)="refreshUsers()">
  </ngb-pagination>

  <select class="form-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="refreshUsers()">
    <option [ngValue]="5">5 usuarios por página</option>
    <option [ngValue]="10">10 usuarios por página</option>
    <option [ngValue]="15">15 usuarios por página</option>
  </select>
</div>

Este código crea una tabla responsive con paginación y la opción de cambiar el número de usuarios por página. 

Esta tabla se vería así en el navegador:

Para implementar la ordenación, podemos añadir directivas de NgbSort a las cabeceras de la tabla:

<thead>
  <tr>
    <th scope="col" sortable="id" (sort)="onSort($event)">#</th>
    <th scope="col" sortable="name" (sort)="onSort($event)">Nombre</th>
    <th scope="col" sortable="email" (sort)="onSort($event)">Email</th>
    <th scope="col" sortable="role" (sort)="onSort($event)">Rol</th>
    <th scope="col" sortable="lastLogin" (sort)="onSort($event)">Último acceso</th>
  </tr>
</thead>

Y añadimos la lógica de ordenación en el componente:

import { CommonModule, DatePipe } from '@angular/common';
import { Component, OnInit, Directive, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

// ... (código anterior)

export type SortColumn = keyof User | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };

const compare = (v1: string | number | Date, v2: string | number | Date) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  standalone: true,
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {
  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

export class UserTableComponent implements OnInit {
  // ... (propiedades anteriores)
  sortColumn: SortColumn = '';
  sortDirection: SortDirection = '';
  
  @ViewChildren(NgbdSortableHeader) headers!: QueryList<NgbdSortableHeader>;

  // ... (constructor y ngOnInit)

  refreshUsers() {
    this.users = [...USERS]
      .sort((a, b) => {
        if (this.sortColumn === '') return 0;
        const res = compare(a[this.sortColumn], b[this.sortColumn]);
        return this.sortDirection === 'asc' ? res : -res;
      })
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }

  onSort({column, direction}: SortEvent) {
    this.sortColumn = column;
    this.sortDirection = direction;
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });
    this.refreshUsers();
  }
}

Para añadir funcionalidad de búsqueda, podemos incluir un campo de entrada en el template:

<div class="mb-3">
  <input
    type="text"
    class="form-control"
    placeholder="Buscar usuarios"
    (input)="onSearch($event)"
  />
</div>

Y la lógica correspondiente en el componente:

export class UserTableComponent implements OnInit {
  // ... (propiedades y métodos anteriores)
  searchTerm: string = '';

  onSearch(event: Event) {
    this.searchTerm = (event.target as HTMLInputElement).value;
    this.page = 1;
    this.refreshUsers();
  }

  matches(user: User, term: string) {
    return user.name.toLowerCase().includes(term.toLowerCase())
      || user.email.toLowerCase().includes(term.toLowerCase())
      || user.role.toLowerCase().includes(term.toLowerCase());
  }

    // Ordenar y paginar (código anterior)
  }
}

El código anterior se vería de la siguiente forma en el navegador:

Con estas implementaciones, tendrás una tabla de usuarios completa con funcionalidades de ordenación, paginación y búsqueda utilizando NgBootstrap en Angular. Esta tabla es altamente personalizable y puede adaptarse fácilmente a diferentes necesidades de datos y diseño.