Como Integrar el Framework Bootstrap 5 en un proyecto Angular
Tenemos muchísimas alternativas de framworks para instalar en un proyecto angular, uno de los mas usados pero no tan preferidos por su complejidad es Angular Material, que sistematiza el uso de componentes visuales utilizando Material Design.
Pero existen muchas alternativas buenísimas, las cuales cabe mencionar.
En este caso y para efectos de poder entender el proceso de instalación al framwork mas utilizado por las comunidades de desarrolladores FRONTEND, ocuparemos BOOTSTRAP.
Esta guía asume que tienen instalado Angular CLI, Si ese no es el caso, puedes dirigirte a la página oficial de angular cli y realizar las instalaciones necesarias.
Paso 1: Crear proyecto angular.
Primero que nada creamos nuestro proyecto y colocamos “y” para crear el archivo que se encarga de rutear las paginas.
Este archivo es innecesario para esta guía ya que solo veremos el funcionamiento de los estilos ya integrados con bootatrap, se indico que lo instalaras para efectos de entender que es lo que hace.
Luego elegimos la hoja de estilos que queremos ocupar y damos “ENTER”
Colocamos en consola el comando “ng serve”, al terminar deberíamos ver la nueva pantalla de inicio de angular.
Paso 2: Instalar Bootstrap.
Instalamos dependencias necesarias desde el “NPM”, lo primero que tenemos que hacer es ir a nuestra consola y colocar el siguiente comando.
npm install bootstrap @popperjs/corePorque no instalamos la dependencia jQuery?
Recordemos que la versión de Bootstrap 5 ya no incluirá jQuery, ahora será ¡JavaScript puro! pues prometen que en esta versión será más rápida, tendrá menos dependencias y contará con una mejor API.
Para el lanzamiento ALPHA 1 tenemos los siguientes cambios
1- jQuery fue eliminado.
2- Bootstrap ahora está escrito con full Vanilla JavaScript.
3- Ya no se tendrá soporte para el navegador de Internet Explorer en la versión 10 y 11.
4- El Sistema de cuadricula mejorado, ahora se ha incluido un nuevo breakpoint la cuál será usada para dispositivos con dimensión de 1400px o mayores.
5- Nueva API disponible, con ella puedes incluir tus propias herramientas y eliminar las proporcionadas por Bootstrap si no las necesitas.
Bootstrap 5 Alpha 2
1- Los siguientes elementos están disponibles en modo oscuro: Carrusel, Drop Down Menu.
2- Rediseño del Botón de Cierre
Bootstrap 5 Alpha 3
• Soporte de Offcanvas llega gracias a los nuevos modales secundarios
• Se está agregando utilidades de tamaño de fuente y actualizando de las utilidades de peso de fuente.
Podemos seguir ocupando jQuery en su versión 5 de bootstrap? pues claro!. Puedes revisar como se implementa en el siguiente LINK
Los comandos que ejecutamos al principio nos instalaran las dependencias bootatrap y @popperjs/core que es necesario para darle mejor potencial al funcionamiento del framework.
Luego de eso nos dirigimos al archivo “angular.json” y colocamos las siguientes instrucciones en los objetos “styles” y “scripts” en donde llamaremos a las propiedades css del bootstrap y las dependencias scripts correspondientes a las interacciones de cada uno.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]debería quedar de la siguiente manera:
Para hacer la prueba básica y verificar que bootstrap este instalado correctamente, nos vamos al archivo “app.componente.html” y eliminaremos todo el contenido que tiene esta hoja y agregamos una nueva funcionalidad que bootstrap implemento en esta versión llamada “Etiquetas flotantes”, esto permitirá agregar un input que al pincharlo tendrá un efecto como si estuviera flotando, esto debes hacerlo debajo del <router-outlet></router-outlet>, debería quedar de la siguiente forma.
<router-outlet></router-outlet>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>Finalmente detenemos nuestro servidor y volver a iniciarlo con un “ng serve”, el resultado que deberíamos ver seria el siguiente:
Con esto tenemos creado nuestro proyecto angular con bootatrap 5 integrado en su ultima versión, si no sabes lo que es bootstrap y quieres aprender mas de el, puedes pinchar este LINK y revisar toda su magia.
Muchas gracias por llegar hasta acá y muy agradecido que le pongas “CLAPS” a mis publicaciones, y claro se agradecen todos los feedback posibles, así podre ayudar a los demás de la mejor manera posible.
