Bienvenidos en esta clase vamos a crear un nuevo componente footer de nuestro layout.
Lo vamos a hacer de forma diferente.
Vamos a crear la clase footer component esta descrip utilizando la consola de Angular Seeley.
Entonces nos vamos a la consola.
Abrimos el terminal dentro de auto, nos vamos a leshe.
Reze, nos vamos a Lapp y vamos a crear el directorio con M kadir footer.
Ahí tenemos nuestro directorio y dentro de footer se de footer vamos a crear la clase.
La clase footer component utilizando en ti generate class y el nombre de la clase.
Entonces es un comando de angular.
Si el hay para crear una clase script con el nombre que le demos footer component enter.
Con eso crea la clase.
Crea el archivo dentro del app footer.
El único problema es que si abrimos tiene un error de compilación y es por el punto.
El punto es para el nombre del archivo, pero no para nombre de la clase.
Por lo tanto simplemente se elimina y guardamos queda footer.
Component todo junto y por supuesto separado con mayúscula.
Acá Kamel Keys Footer componen un estándar de la programación orienta objeto en cualquier lenguaje,
tanto como en Java como en TypeScript.
Siempre los nombre de clase inicia con mayúscula y palabra compuesta.
También se separan con mayúscula.
El Sport sería el modificador, entonces el siguiente paso sería el decorador.
Recordemos que cualquier clase componente de Angular tiene que llevar la anotación.
El decorador component.
Component.
Iba a tener atributos, por ejemplo el selector, el template, pero primero tenemos que importar.
Entonces importamos el decorador component from angular kor arroba angular large core y guardamos.
Ahí tenemos nuestra clase footer component va a tener el selector como atributo.
Le damos el nombre que queramos, pero por ejemplo app footer y el template o RL es importante de que
va a ser nuestra plantilla de la vista.
La idea es que tenga justamente el mismo nombre que el footer componer pero con extensión html.
Ahora que lo tenemos configurado y declarado en el component tendremos que crear este html dentro de
footer new file.
Vamos a crear footer punto com pone el punto html.
Entonces importante que mantenga la misma mano en Creatures para indicar de que corresponde a una vista
HTML del componente footer y de esta forma es mucho más fácil reconocer y diferenciar lo distinto.
Archivos ahí tenemos nuestra plantilla.
Vamos a implementar la plantilla.
Va a tener la etiqueta footer para tener la etiqueta div y dentro de div va a tener un párrafo.
Volvamos al footer component.
Acá podríamos tener un atributo, por ejemplo el autor autor que va a ser de un tipo genérico Kenny.
El tipo Any es genérico, que puede ser cualquier tipo acá le vamos a igualar.
Es simplemente se utiliza para crear objetos genéricos que no sean de un tipo de una clase particular.
Acá podemos tener el nombre como atributo con el valor.
Ahí tenemos el atributo nombre y el atributo apellido.
Y como cualquier atributo de una clase puede ser Public Privé o protected muy similar que en Java por
defecto si no se define es public, pero como decía puede ser private protected public y hay varios
modificadores.
Entonces es importante que el tipo sea genérico, ya que es un objeto que no está asociado a un tipo
de una clase en particular.
Por ejemplo, podríamos crear una clase con el atributo nombre apellido.
Esa clase le podríamos llamar persona o cliente y acá sería cliente o persona en vez de ení.
Simplemente vamos a colocar Henny después.
Más adelante vamos a ver un ejemplo más concreto con. con clases.
Bien, entonces, ahora que ya tenemos el autor, vamos al footer y damos un copy para derecho de autor
a cacería, sería autor punto nombre vamos a concatenar espacio apellido.
Al Coppi le falta el punto y coma.
Guardamos y ahí tenemos nuestro footer.
Podríamos dar un par de estilos de vostra.
Por ejemplo, al footer le damos un fondo, un paquera dark.
Vamos a redondear las esquinas superior, las esquinas top del footer.
Guardamos bien.
Ahí tenemos nuestro pie de página.
Entonces, cuál sería siguiente paso?
Podríamos incluir en el app component.
HTML.
Acá podríamos incluir el selector.
Entonces acá abajo vamos a incluir el selector.
El footer.
Ahí tenemos nuestro componente.
Entonces tenemos hager y tenemos el footer.
Ahora sí, si levantamos la aplicación en el servidor, por ejemplo, con el Yser, va a ocurrir un
error.
Por qué?
Qué nos faltaría para que él a footer funcione?
El error dice que a footer un componente de angular.
No sé si es un componente de Angular.
Verifique que sea parte de este módulo, es decir, que esté registrado dentro del módulo, ya que no
lo reconoce, no lo encuentra y Angular no sabe que existe.
A pesar de que tenemos casi todo creado, tenemos el footer componen la vista, tenemos la clase component
y todo bien configurado, pero faltaría registrar este componente el footer component dentro del módulo
dentro del app móvil.
Entonces como siempre importamos el footer component,
el directorio footer y el archivo footer component solamente el nombre del archivo sin la atención y
ahí tenemos dentro declaration tenemos que registra acá sí importa y acá se registra.
Volvemos y acá está el Futa.
Acá sí que si ahora lo podemos mejorar, le podemos dar estilo.
Por ejemplo, vamos al auto y vamos a agregar un par de estilos más.
Por ejemplo, acá en el footer vamos a centrar entonces context center y acá en el párrafo al texto
le vamos a dar un color blanco.
Ahí está mejor.
Le podríamos dar un poco de padding el dip, le vamos a dar una clase container con un padding en el
eje y de 2.
Que mejor quizá faltaría tirar un poco hacia abajo.
El autor con un margen dentro del párrafo.
Nos vamos al párrafo con un margen en el eje ahí de dos guardamos y ahí está perfecto.
Podríamos dejar el footer justo abajo de la pantalla para que no esté tan pegado al contenido hacia
abajo.
Entonces, para eso tenemos que crear una hoja de estilo personalizada solamente para el componente
footer.
Entonces tenemos que crear primero dentro de footer.
Vamos a crear un nuevo archivo
footer component c es ese.
Recordemos que los estilos del componente hacen efecto solamente a un componente en particular.
Ahí tenemos la hoja de estilo.
Pero primero tenemos que registrarla dentro del componente.
Entonces acá en Stain Wireless la vamos a definir como un arreglo, ya que puede recibir varias hojas
de estilo, más de una footer, componer puntos.
Es eso.
Vamos a guardar y nos vamos a la hoja de estilo.
Vamos a crear una clase footer y le vamos a dar un post hecho en absoluto.
Le damos un bottom de 0px justamente para dejar el pie de página al fondo al final.
Luego le damos una altura de 60 px.
Volvemos al footer html y agregamos en class.
Vamos a agregar el estilo footer.
La clase footer que tenemos creada acá.
Entonces con esto ya vamos al navegador.
Y ahí tenemos nuestro pie de página, con la esquina redondeada, de color más oscuro y justo al final
faltaría dar un ancho de la pantalla 100 por ciento.
Y le damos un 100 por ciento Jassi.
Ahí está perfecto.
El color está distinto al del menú, pudiera manejar los dos de color oscuro.
Nos vamos a la plantilla del Jeeter.
En componer y acá en vez de light dark y empujé también.
Jetta Entonces hoy tenemos nuestro ejemplo.
Por último, para finalizar el contenido principal del medio lo podríamos tener dentro de un contenedor
de busta, un container.
Vamos al app component.
HTML y acá un div y todo el contenido principal va a estar dentro de un container.
Guardamos y actualizamos navegador.
Ahí está perfecto.
Bien, por ahora quedamos hasta acá y cualquier duda que tengan los revisamos en el foro.
Hasta la próxima.