Angular: 7. Descargar las librerías de Bootstrap para utilizarlas en local

En una entrada anterior utilizamos Bootstrap en nuestro proyecto a través de imports desde nuestro "index.html". Este uso es correcto, pero también podemos descargar las librerías a nuestro proyecto y que éste tire de ellas, en lugar de utilizar las de la web. Esta es la manera:

La instalación se lleva a cabo a través de la consola de comandos. Como cuando hicimos los imports, debemos descargar tanto el CSS y el JavaScript de Bootstrap, como el JavaScript de JQuery y Popper.

Abrimos la consola de comandos, nos situamos en nuestro proyecto, y ejecutamos el comando "npm install bootstrap --save". Éste comando nos instalará el CSS y el JavaScript de Bootstrap:

Como se puede comprobar, en mi caso me lo instaló pero dio problemas con 12 vulnerabilidades. Aún así, instalé el JQuery con el comando "npm install jquery --save":

Me lo instaló correctamente pero me seguía indicando el problema de las vulnerabilidades, así que ejecuté el comando que me sugería la consola para arreglarlo "npm audit fix":

Esto tampoco me arregló las vulnerabilidades, así que ejecuté el comando que me sugería esta vez la consola "npm audit fix --force":

Con esto parece que sí se arreglaron los problemas.

Ejecuté el comando que faltaba, el de la instalación del JavaScript de Popper:

Se instaló correctamente. Aún así, para comprobarlo manualmente, nos podemos ir al directorio de nuestro proyecto, y abrimos la carpeta "node_modules", en la que debería haber una carpeta llamada "bootstrap", otra llamada "jquery", y otra llamada "popper.js". En la siguiente captura sólo muestro la "popper.js", pero están las tres:

Por último, para que nuestro proyecto utilice las librerías, debemos indicarlo en el fichero "angular.json". Debemos colocar, en el apartado de "styles", el CSS de Bootstrap, y en el apartado de "scripts", los JavaScripts de Bootstrap, JQuery y Popper.

Recordar que los Javascripts hay que indicarlos siempre en el orden: JQuery, Popper, y Bootstrap, para que no de problemas de dependencias.

El fichero queda como sigue:

Cada vez que se modifique el fichero "angular.json" hay que tirar y levantar de nuevo el servidor para que se actualicen los cambios.

Recordar también que si instalamos Bootstrap de esta manera, no es necesario utilizar imports en los ficheros .html, ya que la aplicación los cogerá y utilizará automáticamente.

Angular: 6. Directiva estructural *ngFor

La directiva *ngFor se utiliza para repetir un elemento por cada entrada que tenga una variable de tipo array que le asociemos.

Vamos a modificar en nuestra página una lista de elementos para que dependa de una lista que le pasaremos por JavaScript.

Primero modificamos la clase "BodyComponent" y le añadimos una propiedad de tipo array de strings con 3 elementos, por ejemplo, a la que llamaremos "personajes":

Después modificamos el "body.component.html".
Creamos una lista "<ul>" a la que sólo añadimos un elemento "<li>". A éste elemento le añadimos la directiva "*ngFor" con el siguiente contenido: "let personaje of personajes; let i = index".
Con "let personaje of personajes" estamos creando una variable "personaje" que va a ser igual a la propiedad "personajes" que creamos en la clase "BodyComponent".
Con "let i = index" estamos creando una variable que va a ser igual al índice de cada elemento. Esto es, simplemente va a ir contando los elementos para mostrar el número.
Finalmente, para el contenido del elemento, colocamos el código "{{ i + 1 }} - {{ personaje }}".
Con éste código estamos mostrando el número del elemento + 1 (para que los elementos empiecen por el número 1, ya que los índices por defecto empiezan en 0), concatenamos un guión y mostramos el personaje correspondiente:

Entramos en la página y comprobamos que la lista se muestra correctamente:

Y eso es todo.

Angular: 5. Directiva estructural *ngIf

La directiva *ngIf se utiliza para mostrar o no un componente dependiendo del valor de una variable.

En nuestra página hemos creado un contenedor con un texto y un botón debajo. Nuestro objetivo es que al pulsar el botón, el contenedor del texto aparezca y desaparezca:

Primero vamos a modificar la clase del fichero "body.component.ts" y le añadimos una propiedad llamada "mostrar" que inicializaremos a "true":

Después hacemos dos modificaciones en el fichero "body.component.html".
La primera modificación consiste en colocar la directiva "*ngIf" en el contenedor del texto e igualarla a la propiedad "mostrar" de la clase "BodyComponent" (que recordemos que inicializamos a "true" por defecto).
La segunda modificación consiste en añadir una función JavaScript al botón para que cada vez que se haga click, cambie el valor de la propiedad "mostrar" a su valor contrario (es decir, que cuando sea "true" cambie a "false" y cuando sea "false" cambie a "true"), logrando de esta forma que aparezca o desaparezca el texto cada vez que pulsemos en el botón:

Una vez hechas las modificaciones, entramos en nuestra página y comprobamos que cada vez que pulsamos el botón, aparece o desaparece el texto:

Es importante destacar que lo que hace la directiva "*ngIf" exactamente es eliminar de la página el código que hayamos marcado, no es que simplemente lo oculte. Es importante saber esto.

Angular: 4. Creación automática de componentes

En la anterior entrada creamos un componente header (cabecera) de forma manual. Ahora vamos a crear el componente pié de página (footer) de forma automática.

La vez anterior creamos los ficheros del componente header de forma manual. Esta vez, nos vamos a la consola de comandos, nos situamos en la carpeta de nuestra aplicación, y ejecutamos el comando "ng g c components/footer". Este comando, sin abreviar, se puede traducir como "ng generate component components/footer", donde "components/footer" es la ruta donde va a crearlo:

Podemos ver, tanto en la consola de comandos como en el editor de texto, que el comando ejecutado nos ha creado la carpeta "footer" dentro de nuestra carpeta "components". Y dentro de la carpeta "footer" nos ha creado 4 ficheros: "footer.component.css" (la hoja de estilos del footer), "footer.component.html", "footer.component.spec.ts" (archivo de pruebas), y "footer.component.ts" (la clase de TypeScript):

Podemos observar también que el comando nos ha agregado automáticamente la clase al fichero "app.module.ts", dejándola lista para poder utilizarla de inmediato:

Vamos a modificar la clase "FooterComponent" recién creada para añadirle una variable "anio" de tipo "number" y la inicializamos en el constructor con el año actual:

A continuación modificamos el html del footer para incluirle el siguiente código.

Con el código "{{ anio }}", se utiliza la variable de la clase "FooterComponent", que al inicializarla con el año actual, siempre va a mostrar el año actual en el que nos encontremos en pantalla.

Con el código "&copy;" simplemente estamos mostrando el símbolo del copyright por pantalla.

Por último, modificamos la hoja de estilos global de la aplicación. Ojo, no modificamos la hoja de estilos del footer (footer.component.css) sino que vamos a modificar la global (styles.css). Realmente daría lo mismo cuál de los dos ficheros modifiquemos, vamos a modificar la global para mostrar que también funcionaría.
La modificación se realiza para que el footer aparezca en la parte inferior de la pantalla, tenga el texto de color blanco, y ocupe el 100% del ancho de la pantalla:

Ya simplemente queda añadir el footer al fichero html de componentes global "app.component.html" para que se muestre en pantalla:

Por último, levantamos la aplicación, entramos, y comprobamos que el footer se muestra correctamente:

Y eso es todo.

Angular: 3. Creación de una cabecera de ejemplo con Bootstrap

Vamos a utilizar Bootstrap para crear la cabecera de nuestra página.

Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.

Lo primero que tenemos que hacer para poder utilizar Bootstrap es entrar en la página oficial y pulsar en el botón de descarga:

A continuación debemos copiar el código para los imports de CSS y JavaScript de Bootstrap, y los JavaScript de Query y Popper:

Y pegarlos en nuestro "index.html", en el siguiente orden:
1. Css de Bootstrap.
2. JavaScript de JQuery.
3. JavaScript de Popper.
4. JavaScript de Bootstrap.

Si no lo hacemos en éste orden, dará problemas de dependencias. Así es cómo quedarían, entre las líneas 11 y 15 del fichero:

A continuación, vamos a crear, dentro de la carpeta "app", una nueva carpeta llamada "components" (donde pondremos todas los componentes de la página, es decir, cabecera, cuerpo, pié de página, menús laterales, etc.) y dentro de esta, una nueva carpeta llamada "header". Dentro de esta última carpeta, crearemos dos ficheros, "header.component.html" (donde pondremos el código html de la cabecera) y "header.component.ts" (donde pondremos el código TypeScript de la cabecera):

Dentro del fichero "header.component.ts" crearemos la clase correspondiente a la cabecera:

Para el fichero "header.component.html", debemos copiar el código html del componente "Navbar" de Bootstrap, que podemos encontrar en su página principal, dentro de la parte de componentes:

Y lo pegamos sin más en nuestro fichero "header.component.html":

Como penúltimo paso, debemos modificar el fichero "app.module.ts" (que es el fichero en donde se configuran las importaciones de clases), añadiendo nuestra nueva clase clase "HeaderComponent" a él:

Por último, simplemente queda añadir la etiqueta que le hemos puesto a nuestra clase en el fichero "app.component.html" para que aparezca en la pantalla:

Tras guardar los cambios, aparecerá la cabecera en nuestra página:

Y eso es todo.