¿Cómo usar Bootstrap en Angular 2?

¿Cómo usar Bootstrap en Angular 2?

Bootstrap en Angular 2
Angular 2 esta en boca de todos hoy día por que al combinarlo con TypeScript no solo permite el desarrollo de aplicaciones Web de forma aceleradas sino que las mismas son ahora robustas y más fáciles de reutilizar lo cual ahorra bastante tiempo y por lo tanto dinero durante la fase de desarrollo.

Por otro lado tenemos Bootstrap, el cual es uno de los frameworks HTML, CSS y JavaScripts mas populares en el mundo del desarrollo web, ya que permite el desarrollo de proyectos web responsive y mobile first.

Pues ya que son tan populares estos frameworks se nos ocurrió que combinarlos sería una idea interesante, así que esto fue lo que hicimos.

Agregar ng2-bootstrap al proyecto Angular 2

ng2-bootstrap es una librería desarrollada en TypeScript por la gente de Valor Software, en la que se incluyen directivas nativas de Angular 2 para usar boostrap.

Para agregar esta magnifica librería de Directivas a un proyecto de Angular 2 simplemente accedemos a la carpeta raíz de nuestro proyecto lanzamos el siguiente comando npm:

npm install ng2-bootstrap --save

Con el comando anterior descargamos la librería y la incluimos en el proyecto y también gracias al parámetro –save incluimos dicha librería como una dependencia de nuestro proyecto Angular 2 en el fichero package.json.

...
"dependencies": {
    ...
    "ng2-bootstrap": "^1.1.14",
    ...
  },
...

Incluimos los estilos CSS de Bootstrap

Una vez instalada e incluida la librería ng2-bootstrap en el proyecto necesitamos incluir los estilos CSS de Bootstrap y en este caso, lo haremos incluyéndolos en el fichero index.html tal como incluimos cualquier fichero .css pero en nuestro caso usaremos el CND de Bootstrap:

Angular 2 Tutorial
    
    
    <!-- 1. Definimos los Estilos CSS-->
    
    <!-- 1.1 Incluimos los Estilos CSS de Bootstrap-->
    
    
    <!-- 1.2 Incluimos los Estilos CSS propios de la app-->
    
    
    <!-- 2. Cargamos las librería JavaScript -->
     ...
    <!-- 3. Cargamos el modulo en el que se define nuestra Aplicación Angular 2 --><script>// <![CDATA[
      System.import('app').catch(function(err){ console.error(err); });
    
// ]]></script><!-- 4. Desplegamos nuestra app --> Cargando...

Aplicamos estilos CSS de Bootstrap en Componentes

Ahora que tenemos todo lo que se necesita para trabajar con Bootstrap en Angular 2, vamos a probar como funciona.

Supongamos que tenemos un componente de Angular 2 en cuyo template se muestra un listado de productos y cantidades (como el de Shopping List App que creamos en nuestro Angular 2 Tutorial); dicho template se define bajo el siguiente código:


{{title}}

 

Cantidad
{{item.cantidad}}

Producto
{{item.productName}}

Al desplegar nuestra Angular 2 app en el browser veríamos algo como esto:
Bootstrap en Angular 2

Se ve bastante feo verdad?. Pero y si ahora simplemente agregamos las clases CSS table y table-striped, como valores del atributo class del tag table, de tal manera que el template quedaría ahora con el siguiente código.


{{title}}

 

Cantidad
{{item.cantidad}}

Producto
{{item.productName}}

Ahora si volvemos a desplegar nuestra Angular 2 app en el browser veríamos algo como esto:
Angular 2 Bootstrap

Ahora nuestra Shopping List se ve muchísimo mejor cierto? y todo gracias a Bootstrap 🙂

Conclusión

Como verás es muy sencillo usar Bootstrap en Angular 2, para mejorar le aspecto visual de las aplicaciones Web. Si quieres saber más sobre aplicaciones web desarrolladas con Angular 2 puedes quedarte con nosotros y seguir leyendo nuestro Angular 2 Tutorial.

No olvides suscribirte a nuestro newsletter para que no te pierdas de ninguna de nuestras próximas publicaciones.

Si te ha gustado este entrada compártela con tus amigos en las redes sociales, y así ayudaras a compartir el conocimiento y si tienes dudas, o inquietudes sobre algún tema no olvides comentar.

Happy Coding!

A %d blogueros les gusta esto: