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 "©" 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.
No hay comentarios:
Publicar un comentario