1
00:00:00,260 --> 00:00:00,840
Y qué tal?

2
00:00:00,990 --> 00:00:03,120
Ya estamos de vuelta con la directiva estructurales.

3
00:00:03,210 --> 00:00:09,540
Ahora vamos a ver en IFF una condición IF típica de cualquier lenguaje de programación para evaluar

4
00:00:09,570 --> 00:00:13,380
una expresión y de acuerdo si es verdadero o falso.

5
00:00:13,440 --> 00:00:15,510
Mostrar ocultar un contenido.

6
00:00:15,600 --> 00:00:18,450
Entonces vamos a volver a nuestro ejemplo anterior.

7
00:00:18,840 --> 00:00:27,810
Vamos a directiva y dentro del HTML vamos a tener acá, justo arriba del CAR, un botón, un button

8
00:00:29,400 --> 00:00:38,880
type button con clases de vostra btn de un botón btn primary.

9
00:00:38,970 --> 00:00:43,830
Y vamos a dar también un margen en I de 3.

10
00:00:44,030 --> 00:00:51,810
Ahí tenemos nuestro botón para mostrar o ocultar el listado de curso el uele List Group, por ejemplo,

11
00:00:51,840 --> 00:00:52,290
ocultar.

12
00:00:53,250 --> 00:01:03,180
Vamos a tener una variable en nuestra directiva debajo del listado habilitar que va a ser del tipo booleano.

13
00:01:04,440 --> 00:01:07,920
Un Bolen por defecto lo vamos a dejar en true.

14
00:01:08,820 --> 00:01:16,500
Es decir, que se muestre que se muestre el listado curso y acá en el Whele vamos a preguntar utilizando

15
00:01:16,590 --> 00:01:20,730
endif if igual doble comillas.

16
00:01:20,820 --> 00:01:30,030
La condición por ejemplo habilitar es igual a true o simplemente habilitar porque si colocamos if habilitar

17
00:01:30,090 --> 00:01:32,530
sería lo mismo que decir habilitar igual true.

18
00:01:32,760 --> 00:01:34,470
Esto es un poco más explícito.

19
00:01:34,680 --> 00:01:38,610
Si es true, entonces va a mostrar el contenido de los cursos.

20
00:01:38,730 --> 00:01:41,790
Vamos a guardar, vamos a ir a la consola y vamos a levantar.

21
00:01:48,510 --> 00:01:55,020
Cómo hacemos cuando hagamos clic en ocultar esto, desaparezca, se oculte el contenido en el botón?

22
00:01:55,200 --> 00:02:03,000
Acá tenemos que invocar una acción utilizando los paréntesis click igual INEC Click.

23
00:02:03,030 --> 00:02:10,200
Simplemente podemos cambiar la condición del habilitar habilitar igual falso.

24
00:02:10,260 --> 00:02:13,180
Entonces sería igual falso.

25
00:02:13,410 --> 00:02:15,000
Simplemente guardamos.

26
00:02:15,980 --> 00:02:19,400
Volvemos al navegador y hacemos clic en Ocultar y desaparece.

27
00:02:19,760 --> 00:02:22,150
Ahí tenemos funcionando el GIF.

28
00:02:22,970 --> 00:02:25,280
Ahora, cómo hacemos para que vuelva a aparecer?

29
00:02:26,140 --> 00:02:30,950
Entonces en habilitar vamos a asignar el valor contrario al cual está asignado.

30
00:02:31,040 --> 00:02:33,800
Y para eso tenemos que utilizar el operador condicional.

31
00:02:33,860 --> 00:02:36,860
Para poder evaluar, entonces habilitar sería igual.

32
00:02:37,160 --> 00:02:42,540
Paréntesis Habilitar que preguntamos si habilitar es igual a Trump.

33
00:02:42,920 --> 00:02:44,870
Acá preguntamos si es Trump.

34
00:02:45,140 --> 00:02:47,030
Vamos a retornar fols.

35
00:02:47,960 --> 00:02:50,390
De lo contrario retornamos Turu.

36
00:02:53,440 --> 00:02:57,970
Ahora sería bueno que cambia también el valor acá ocultar y mostrar según corresponda.

37
00:02:59,320 --> 00:03:01,540
Para eso tenemos que modificar acá.

38
00:03:01,840 --> 00:03:06,970
Entonces, en vez de utilizar un string, vamos a utilizar las doble llaves y vamos a preguntar también

39
00:03:07,870 --> 00:03:13,120
si habilitar se habilitar es igual a true.

40
00:03:13,540 --> 00:03:18,070
Entonces comilla simple, vamos a colocar ocultas.

41
00:03:19,720 --> 00:03:29,650
De lo contrario mostrar, guardamos, volvemos y ocultar, mostrar, ocultar, mostrar.

42
00:03:29,800 --> 00:03:33,440
Ya tenemos funcionando el GIF y también el Gifford.

43
00:03:33,670 --> 00:03:34,660
Y una mejor opción.

44
00:03:34,750 --> 00:03:43,000
En vez de evaluar acá y asignar a la variable habilitar el true o el fols, es mejor hacerlo en un método

45
00:03:43,090 --> 00:03:45,670
en la clase directiva component.

46
00:03:46,060 --> 00:03:48,610
Podríamos cortar todo esto de acá.

47
00:03:48,770 --> 00:03:53,440
Vamos al componente directiva component y acá vamos a tener un método.

48
00:03:53,680 --> 00:03:56,110
Por ejemplo Zeth habilitar.

49
00:03:58,090 --> 00:04:03,070
Fue un método que no retorna nada, simplemente asigna un valor al habilitar.

50
00:04:03,310 --> 00:04:07,150
Por lo tanto es un bait y acá tenemos nuestra condición.

51
00:04:07,300 --> 00:04:09,700
Y cómo habilitar es un atributo de la clase.

52
00:04:09,970 --> 00:04:10,750
Usamos vist.

53
00:04:13,700 --> 00:04:14,810
Bien, ahí está mucho mejor.

54
00:04:14,840 --> 00:04:17,060
Entonces volvemos al HTML.

55
00:04:17,240 --> 00:04:21,680
Llega ese día, se habilità y guardamos.

56
00:04:21,770 --> 00:04:29,660
Por lo tanto, invoca el método C habilitar o la función de la clase componente y todo lo demás sigue

57
00:04:29,720 --> 00:04:30,050
igual.

58
00:04:30,200 --> 00:04:31,370
Vamos al navegador.

59
00:04:33,620 --> 00:04:35,300
Y funciona exactamente igual.

60
00:04:36,090 --> 00:04:40,790
Siempre es bueno tener la consola habilitada en caso de que ocurra algún error.

61
00:04:40,850 --> 00:04:41,300
Siempre.

62
00:04:41,330 --> 00:04:46,190
Cada vez que estemos trabajando con angula, bien, por ahora quedamos acá y cualquier duda que tengan

63
00:04:46,280 --> 00:04:47,150
la revisamos.

64
00:04:47,270 --> 00:04:48,170
Hasta la próxima.