ng-bootstrap y ngx-bootstrap

Son dos bibliotecas de componentes de Angular basadas en el Bootstrap original.

Ambas librerías nos ofrecen componentes con la hoja de estilo de Bootstrap pero sin la necesidad de utilizar las librerías JQuery, Popper y la librería Javascript propia de Bootstrap original.

ng-bootstrap y ngx-bootstrap son dos proyectos diferentes de dos equipos de desarrolladores diferentes que intentan lograr más o menos lo mismo que es usar Bootstrap en Angular sin el uso de jQuery y utilizar componentes nativas de Angular.

ngx-bootstrap es compatible con Bootstrap 3, 4 y 5, ng-bootstrap es compatible solo Bootstrap 4 y en beta para Bootstrap 5.

Pasos para instalar ng-bootstrap en Angular 9.

Se sigue requiriendo el archivo de la hoja de estilo bootstrap.css, así que lo primero que debemos hacer referencia al mismo, recordemos que tenemos tres formas de hacerlo, la forma más sencilla es mediante CDN indicando en el archivo index.html:
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
```
Las otras dos formas que ya vimos son localizandolo en la capeta 'assets' o mediante npm.
En segundo paso instalamos el módulo de ng-bootstrap mediante el administrador de paquetes de Node.JS:
```
npm install --save @ng-bootstrap/ng-bootstrap
```
También debemos instalar el módulo:
```
ng add @angular/localize
```

Modificamos el archivo 'app.module.ts' agregando el módulo 'NgbModule':

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Si visitamos el sitio oficial de ng-bootstrap podremos ver otras formas de instalar algunas componentes y no todas con el objetivo que nuestra aplicación tenga el menor tamaño posible.

Con estos cuatro pasos ya tenemos configurado ng-bootstrap listo para comenzar nuestro proyecto.

Pasos para instalar ngx-bootstrap en Angular 13.

Si nos decidimos a utilizar ngx-bootstrap en nuestro proyecto debemos dar los siguientes pasos:

La forma más sencilla es utilizar Angular CLI para instalar todas las dependencias de ngx-bootstrap (de forma idéntica a como instalamos en su momento Angular Material):
```
ng add ngx-bootstrap 
```

Luego debemos modificar el archivo 'app.module.ts' a medida que requerimos importar componentes, por ejemplo si queremos trabajar con la componente 'alert' debemos implementar el siguiente cambio:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AlertModule } from 'ngx-bootstrap/alert';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AlertModule.forRoot(),
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Se sigue requiriendo el archivo de la hoja de estilo bootstrap.css, así que lo primero que debemos hacer referencia al mismo, mediante CDN indicando en el archivo index.html:

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We">

Retornar

70 - ng-bootstrap y ngx-bootstrap

Pasos para instalar ng-bootstrap en Angular 9.

Pasos para instalar ngx-bootstrap en Angular 13.