Cómo pasar una plantilla en Bootstrap a Angular

En un post anterior vimos cómo configurar nuestro proyecto en Angular para incluir tanto Bootstrap como Font-Awesome.

Ahora, lo que vamos a hacer es ver cómo podemos pasar una de las plantilla que tenemos en la página de bootstrap a Angular para poder usarlas en nuestros proyectos.

Sección de ejemplos de Bootstrap

Lo primero que haremos será ir a la sección de ejemplos de bootstrap (recuerda que estamos trabajando con las versión 4.1). Una vez allí, veremos el que se adapta mejor a nuestro proyecto. Yo para este artículo utilizaré starter-template.

Si analizamos la página veremos que hay dos secciones bien diferenciadas, la superior o header y la parte central o content. Con esto en mente ya tenemos un idea de en qué componentes podemos partir nuestra página. Otro detalle que tendremos en cuenta, es que la parte superior o header lo llevaremos a un módulo compartido (shared module) ya que es muy probable que este componente queramos reutilizarlo en otras páginas.

 

Pues bien manos a la obra. Lo primeros que haremos será crear el módulo shared, y añadir en él un componente que llamaremos header. Tanto para crear el módulo como el componente usaremos Angular-CLI.

 

Si todo ha ido bien, tendremos la siguiente estructura en nuestro proyecto.

 

 

Lo primero que haremos será importar nuestro módulo en el app.module.ts. Para eso solo debemos añadir SharedModule a la sección de imports:


Luego en nuestro SharedModule debemos exportar nuestro HeaderComponent. Para eso solo debemos crear la sección exports y añadir en ella HeaderComponent.

Ahora para probar que todo ha ido bien añadiremos nuestro HeaderComponent al app.compoment.html. Como es una prueba simplemente añadimos lo siguiente en la primera linea



Tras esto, lanzamos nuestra app (si no lo hemos hecho ya) y si todo está bien debemos ver lo siguiente.

 

Ahora es momento de hacer bien nuestra cabecera. Para eso debemos ver el código fuente de la plantilla, y copiar el HTML de la cabecera:

Ahora nuestro proyecto se ve:

 

Ya solo nos queda borrar el resto del contenido del fichero app.component.html para añadir el resto del HTML.

 

Con esto nuestra página se verá de la siguiente manera:

 

Como vemos el estilo del texto no es el mismo y tampoco sale en la misma posición. Si analizamos la plantilla que estamos replicando vemos que está tiene un archivo css (starter-template.css) que debemos incorporar a nuestro proyecto.

Analizando los estilos vemos que se definen dos estilos, uno para el body, y otro para la clase starter-template. Para incorporar estos estilos debemos, poner el estilo del body en el fichero styles.css y el de la clase .starter-template en el fichero app.component.css.

Con estos cambios nuestro proyecto se verá de la siguiente forma:

Bueno pues hemos acabado de replicar la plantilla en nuestro proyecto aunque todavía quedan cosas por hacer (y que descubriremos en próximos artículos), como por ejemplo:

  • El Dropdown no funciona. Esto es debido a que bootstrap usa jQuery y éste no está instalado en nuestro proyecto.
  • Añadir navegación y hacer que el contenido actual se cargue en un component asignado a una ruta y no directamente en el app.component.html

¿Te ha servido de ayuda este artículo? Si tienes dudas puedes compartirlas en los comentarios. ¡Saludos!

Senior Software Developer en TecAlliance GmbH

Alumnos del Bootcamp Mobile

 

 

 

Si tienes algo que deseas compartir o quieres formar parte de JustCodeIt, escríbenos a [email protected].



 

Share this:

2 comments, add yours.

Maxi

No me funcionó, quizas esta desactualizado

    Sergio Marrero

    Hola, ¿podrías darme más detalles?¿qué es exactamente lo que no he ha funcionado?

Leave a comment