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:
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:
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í:
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:
O usar el componente ngb-alert así:
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.
