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.

Bootstrap 4 con Angular 2

Bootstrap 4 con Angular 2

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.


Relacionado:  Validar formularios en Spring Boot

Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 579 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: