En este post te mostraré cómo comenzar a usar los estilos de Boostrap 4 en una app de Angular 2 gracias a ng-bootstrap.

Instalar dependencias

Comienza instalando los estilos de Bootstrap 4 con:

npm install --save bootstrap

Si te indica que necesita popper.js o jquery, ignora las advertencias.

Después de instalar los estilos, instala los componentes de Bootstrap 4 con:

npm install --save @ng-bootstrap/ng-bootstrap

Dejo como referencia mi package.json:

See the gist on github.

Presta atención a la línea 13 y 14 pues en ellos indico las dependencias de Bootstrap.

Importar Bootstrap en Angular

En el main.ts importa el módulo NgbModule así:

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

Y en los imports del @NgModule dentro de app.module.ts también:

See the gist on github.

Finalmente en el angular.json dentro del arreglo de styles indica el de Bootstrap que está dentro de node_modules/bootstrap/dist/css/bootstrap.min.css de manera que quede así:

See the gist on github.

En la línea 27 es en donde importo los estilos.

Usar estilos o componentes de Bootstrap 4 con Angular 2

Ahora puedes usar tanto los estilos de Bootstrap como los componentes del mismo. De hecho, si solo vas a usar los estilos CSS solo es necesario instalar la dependencia de Bootstrap y agregar los estilos.

Por ejemplo, podemos tener una alerta con puro CSS usando las clases de BS4:

See the gist on github.

O usar el componente ngb-alert así:

See the gist on github.

Al final tendremos el mismo resultado, la ventaja que provee ng-bootstrap es que los componentes y el funcionamiento de los mismos (abrir un modal, cerrar una alerta) están hechos con TypeScript.

Si quieres, igualmente puedes ver cómo agregar estilos Material Design a Angular 2 o ver cómo conectar MySQL y PHP con Angular 2.