1
00:00:00,180 --> 00:00:04,980
Bienvenidos en esta clase vamos a crear un nuevo componente footer de nuestro layout.

2
00:00:05,160 --> 00:00:06,930
Lo vamos a hacer de forma diferente.

3
00:00:07,110 --> 00:00:12,780
Vamos a crear la clase footer component esta descrip utilizando la consola de Angular Seeley.

4
00:00:12,900 --> 00:00:14,580
Entonces nos vamos a la consola.

5
00:00:15,030 --> 00:00:18,600
Abrimos el terminal dentro de auto, nos vamos a leshe.

6
00:00:18,600 --> 00:00:25,110
Reze, nos vamos a Lapp y vamos a crear el directorio con M kadir footer.

7
00:00:26,130 --> 00:00:32,760
Ahí tenemos nuestro directorio y dentro de footer se de footer vamos a crear la clase.

8
00:00:32,910 --> 00:00:40,810
La clase footer component utilizando en ti generate class y el nombre de la clase.

9
00:00:40,950 --> 00:00:43,650
Entonces es un comando de angular.

10
00:00:43,740 --> 00:00:51,680
Si el hay para crear una clase script con el nombre que le demos footer component enter.

11
00:00:52,860 --> 00:00:53,940
Con eso crea la clase.

12
00:00:54,000 --> 00:00:57,900
Crea el archivo dentro del app footer.

13
00:00:58,110 --> 00:01:03,270
El único problema es que si abrimos tiene un error de compilación y es por el punto.

14
00:01:03,360 --> 00:01:07,110
El punto es para el nombre del archivo, pero no para nombre de la clase.

15
00:01:07,170 --> 00:01:10,800
Por lo tanto simplemente se elimina y guardamos queda footer.

16
00:01:10,860 --> 00:01:14,760
Component todo junto y por supuesto separado con mayúscula.

17
00:01:14,880 --> 00:01:21,330
Acá Kamel Keys Footer componen un estándar de la programación orienta objeto en cualquier lenguaje,

18
00:01:21,420 --> 00:01:23,450
tanto como en Java como en TypeScript.

19
00:01:23,470 --> 00:01:27,780
Siempre los nombre de clase inicia con mayúscula y palabra compuesta.

20
00:01:27,780 --> 00:01:29,280
También se separan con mayúscula.

21
00:01:29,640 --> 00:01:34,380
El Sport sería el modificador, entonces el siguiente paso sería el decorador.

22
00:01:34,500 --> 00:01:39,990
Recordemos que cualquier clase componente de Angular tiene que llevar la anotación.

23
00:01:40,080 --> 00:01:41,160
El decorador component.

24
00:01:42,570 --> 00:01:43,260
Component.

25
00:01:43,800 --> 00:01:50,150
Iba a tener atributos, por ejemplo el selector, el template, pero primero tenemos que importar.

26
00:01:50,790 --> 00:02:02,880
Entonces importamos el decorador component from angular kor arroba angular large core y guardamos.

27
00:02:02,940 --> 00:02:09,150
Ahí tenemos nuestra clase footer component va a tener el selector como atributo.

28
00:02:09,600 --> 00:02:17,570
Le damos el nombre que queramos, pero por ejemplo app footer y el template o RL es importante de que

29
00:02:17,570 --> 00:02:19,590
va a ser nuestra plantilla de la vista.

30
00:02:20,340 --> 00:02:25,920
La idea es que tenga justamente el mismo nombre que el footer componer pero con extensión html.

31
00:02:28,950 --> 00:02:35,850
Ahora que lo tenemos configurado y declarado en el component tendremos que crear este html dentro de

32
00:02:35,850 --> 00:02:37,920
footer new file.

33
00:02:38,320 --> 00:02:41,580
Vamos a crear footer punto com pone el punto html.

34
00:02:42,000 --> 00:02:47,250
Entonces importante que mantenga la misma mano en Creatures para indicar de que corresponde a una vista

35
00:02:47,250 --> 00:02:53,580
HTML del componente footer y de esta forma es mucho más fácil reconocer y diferenciar lo distinto.

36
00:02:53,580 --> 00:02:56,550
Archivos ahí tenemos nuestra plantilla.

37
00:02:56,640 --> 00:02:58,080
Vamos a implementar la plantilla.

38
00:02:59,830 --> 00:03:07,060
Va a tener la etiqueta footer para tener la etiqueta div y dentro de div va a tener un párrafo.

39
00:03:07,860 --> 00:03:10,080
Volvamos al footer component.

40
00:03:11,400 --> 00:03:18,480
Acá podríamos tener un atributo, por ejemplo el autor autor que va a ser de un tipo genérico Kenny.

41
00:03:18,570 --> 00:03:23,130
El tipo Any es genérico, que puede ser cualquier tipo acá le vamos a igualar.

42
00:03:23,280 --> 00:03:28,110
Es simplemente se utiliza para crear objetos genéricos que no sean de un tipo de una clase particular.

43
00:03:28,230 --> 00:03:32,370
Acá podemos tener el nombre como atributo con el valor.

44
00:03:32,430 --> 00:03:37,050
Ahí tenemos el atributo nombre y el atributo apellido.

45
00:03:40,110 --> 00:03:46,680
Y como cualquier atributo de una clase puede ser Public Privé o protected muy similar que en Java por

46
00:03:46,680 --> 00:03:52,350
defecto si no se define es public, pero como decía puede ser private protected public y hay varios

47
00:03:52,350 --> 00:03:52,920
modificadores.

48
00:03:53,790 --> 00:03:59,400
Entonces es importante que el tipo sea genérico, ya que es un objeto que no está asociado a un tipo

49
00:03:59,400 --> 00:04:00,730
de una clase en particular.

50
00:04:00,870 --> 00:04:04,560
Por ejemplo, podríamos crear una clase con el atributo nombre apellido.

51
00:04:04,620 --> 00:04:11,070
Esa clase le podríamos llamar persona o cliente y acá sería cliente o persona en vez de ení.

52
00:04:11,160 --> 00:04:13,210
Simplemente vamos a colocar Henny después.

53
00:04:13,220 --> 00:04:16,770
Más adelante vamos a ver un ejemplo más concreto con. con clases.

54
00:04:17,970 --> 00:04:24,810
Bien, entonces, ahora que ya tenemos el autor, vamos al footer y damos un copy para derecho de autor

55
00:04:25,380 --> 00:04:33,810
a cacería, sería autor punto nombre vamos a concatenar espacio apellido.

56
00:04:36,660 --> 00:04:38,430
Al Coppi le falta el punto y coma.

57
00:04:39,030 --> 00:04:41,130
Guardamos y ahí tenemos nuestro footer.

58
00:04:41,220 --> 00:04:43,680
Podríamos dar un par de estilos de vostra.

59
00:04:43,710 --> 00:04:49,890
Por ejemplo, al footer le damos un fondo, un paquera dark.

60
00:04:51,990 --> 00:04:57,090
Vamos a redondear las esquinas superior, las esquinas top del footer.

61
00:04:57,240 --> 00:04:58,950
Guardamos bien.

62
00:04:59,040 --> 00:05:00,810
Ahí tenemos nuestro pie de página.

63
00:05:00,990 --> 00:05:02,280
Entonces, cuál sería siguiente paso?

64
00:05:02,340 --> 00:05:06,090
Podríamos incluir en el app component.

65
00:05:06,150 --> 00:05:06,840
HTML.

66
00:05:07,560 --> 00:05:09,390
Acá podríamos incluir el selector.

67
00:05:09,880 --> 00:05:12,840
Entonces acá abajo vamos a incluir el selector.

68
00:05:12,930 --> 00:05:13,470
El footer.

69
00:05:14,400 --> 00:05:17,070
Ahí tenemos nuestro componente.

70
00:05:17,310 --> 00:05:19,530
Entonces tenemos hager y tenemos el footer.

71
00:05:19,650 --> 00:05:27,900
Ahora sí, si levantamos la aplicación en el servidor, por ejemplo, con el Yser, va a ocurrir un

72
00:05:27,900 --> 00:05:28,290
error.

73
00:05:28,500 --> 00:05:29,130
Por qué?

74
00:05:29,280 --> 00:05:32,400
Qué nos faltaría para que él a footer funcione?

75
00:05:32,760 --> 00:05:36,450
El error dice que a footer un componente de angular.

76
00:05:36,570 --> 00:05:38,250
No sé si es un componente de Angular.

77
00:05:38,340 --> 00:05:44,490
Verifique que sea parte de este módulo, es decir, que esté registrado dentro del módulo, ya que no

78
00:05:44,490 --> 00:05:47,850
lo reconoce, no lo encuentra y Angular no sabe que existe.

79
00:05:48,000 --> 00:05:55,650
A pesar de que tenemos casi todo creado, tenemos el footer componen la vista, tenemos la clase component

80
00:05:55,710 --> 00:06:02,160
y todo bien configurado, pero faltaría registrar este componente el footer component dentro del módulo

81
00:06:02,250 --> 00:06:03,630
dentro del app móvil.

82
00:06:04,380 --> 00:06:10,110
Entonces como siempre importamos el footer component,

83
00:06:13,320 --> 00:06:21,740
el directorio footer y el archivo footer component solamente el nombre del archivo sin la atención y

84
00:06:21,750 --> 00:06:29,730
ahí tenemos dentro declaration tenemos que registra acá sí importa y acá se registra.

85
00:06:30,770 --> 00:06:32,330
Volvemos y acá está el Futa.

86
00:06:32,510 --> 00:06:36,380
Acá sí que si ahora lo podemos mejorar, le podemos dar estilo.

87
00:06:36,410 --> 00:06:41,060
Por ejemplo, vamos al auto y vamos a agregar un par de estilos más.

88
00:06:41,120 --> 00:06:50,630
Por ejemplo, acá en el footer vamos a centrar entonces context center y acá en el párrafo al texto

89
00:06:51,140 --> 00:06:53,120
le vamos a dar un color blanco.

90
00:06:54,950 --> 00:06:55,550
Ahí está mejor.

91
00:06:55,880 --> 00:07:05,810
Le podríamos dar un poco de padding el dip, le vamos a dar una clase container con un padding en el

92
00:07:05,810 --> 00:07:07,040
eje y de 2.

93
00:07:08,710 --> 00:07:11,800
Que mejor quizá faltaría tirar un poco hacia abajo.

94
00:07:12,310 --> 00:07:14,950
El autor con un margen dentro del párrafo.

95
00:07:16,110 --> 00:07:24,030
Nos vamos al párrafo con un margen en el eje ahí de dos guardamos y ahí está perfecto.

96
00:07:25,290 --> 00:07:31,200
Podríamos dejar el footer justo abajo de la pantalla para que no esté tan pegado al contenido hacia

97
00:07:31,200 --> 00:07:31,470
abajo.

98
00:07:31,590 --> 00:07:37,230
Entonces, para eso tenemos que crear una hoja de estilo personalizada solamente para el componente

99
00:07:37,230 --> 00:07:37,590
footer.

100
00:07:37,950 --> 00:07:42,510
Entonces tenemos que crear primero dentro de footer.

101
00:07:42,900 --> 00:07:44,430
Vamos a crear un nuevo archivo

102
00:07:47,640 --> 00:07:49,410
footer component c es ese.

103
00:07:49,800 --> 00:07:54,900
Recordemos que los estilos del componente hacen efecto solamente a un componente en particular.

104
00:07:55,020 --> 00:07:57,240
Ahí tenemos la hoja de estilo.

105
00:07:57,450 --> 00:08:01,650
Pero primero tenemos que registrarla dentro del componente.

106
00:08:02,580 --> 00:08:10,780
Entonces acá en Stain Wireless la vamos a definir como un arreglo, ya que puede recibir varias hojas

107
00:08:10,780 --> 00:08:16,290
de estilo, más de una footer, componer puntos.

108
00:08:16,590 --> 00:08:17,120
Es eso.

109
00:08:18,660 --> 00:08:21,710
Vamos a guardar y nos vamos a la hoja de estilo.

110
00:08:22,740 --> 00:08:27,660
Vamos a crear una clase footer y le vamos a dar un post hecho en absoluto.

111
00:08:32,250 --> 00:08:39,540
Le damos un bottom de 0px justamente para dejar el pie de página al fondo al final.

112
00:08:40,050 --> 00:08:43,290
Luego le damos una altura de 60 px.

113
00:08:45,630 --> 00:08:49,620
Volvemos al footer html y agregamos en class.

114
00:08:49,890 --> 00:08:52,980
Vamos a agregar el estilo footer.

115
00:08:53,220 --> 00:08:56,640
La clase footer que tenemos creada acá.

116
00:08:57,240 --> 00:08:59,370
Entonces con esto ya vamos al navegador.

117
00:09:00,570 --> 00:09:05,220
Y ahí tenemos nuestro pie de página, con la esquina redondeada, de color más oscuro y justo al final

118
00:09:05,310 --> 00:09:08,490
faltaría dar un ancho de la pantalla 100 por ciento.

119
00:09:10,270 --> 00:09:14,910
Y le damos un 100 por ciento Jassi.

120
00:09:15,160 --> 00:09:15,970
Ahí está perfecto.

121
00:09:16,060 --> 00:09:20,380
El color está distinto al del menú, pudiera manejar los dos de color oscuro.

122
00:09:20,470 --> 00:09:22,770
Nos vamos a la plantilla del Jeeter.

123
00:09:24,530 --> 00:09:29,930
En componer y acá en vez de light dark y empujé también.

124
00:09:32,940 --> 00:09:35,310
Jetta Entonces hoy tenemos nuestro ejemplo.

125
00:09:35,760 --> 00:09:41,820
Por último, para finalizar el contenido principal del medio lo podríamos tener dentro de un contenedor

126
00:09:41,910 --> 00:09:43,470
de busta, un container.

127
00:09:44,370 --> 00:09:46,050
Vamos al app component.

128
00:09:46,200 --> 00:09:55,500
HTML y acá un div y todo el contenido principal va a estar dentro de un container.

129
00:09:57,330 --> 00:10:00,030
Guardamos y actualizamos navegador.

130
00:10:00,120 --> 00:10:00,930
Ahí está perfecto.

131
00:10:01,080 --> 00:10:05,910
Bien, por ahora quedamos hasta acá y cualquier duda que tengan los revisamos en el foro.

132
00:10:06,060 --> 00:10:06,960
Hasta la próxima.