Además de por supuesto colocar elementos, el template de un componente puede modificarse vía directivas estructurales.
Estas directivas se aplican sobre un elemento host, y alteran el esquema de elementos de nuestra vista.
El concepto suena más complejo de lo que en realidad es en práctica, sólo queremos que quede claro para que puedas identificar estas directivas cuando observes el template de un elemento de Angular.
Las directivas estructurales aparecen dentro de la etiqueta declaración de un elemento y se distinguen porque aparecen con un * antes del nombre de la directiva, por ejemplo:
<slider *directiva=””></slider>
El asterisco es una manera sencilla de expresar lo que eventualmente Angular transformará en otra estructura distinta, por ahora no nos pondremos tan técnicos, así que no ahondaremos en qué hace Angular con el * hasta después.
Lo que aparece dentro del string de la directiva es una expresión de JavaScript que la directiva eventualmente usará, cada directiva espera instrucciones distintas, sólo es importante recordar que no es un string, lo que escribas dentro será interpretado como una expresión de JavaScript.
Algunas de las directivas más comunes que tenemos son ngIf, ngSwitch y ngFor, mismas que iremos viendo en los siguientes temas. Por ahora sólo quiero que veas un ejemplo práctico del uso de directivas estructurales.
<slider *ngIf=”mostrarSlider == true”></slider>
La clave de las directivas estructurales es que modifican el DOM, por ejemplo, ngIf define si el elemento existirá o no, dependiendo de la condición que pasamos a la directiva, ngFor crea elementos repetidos y así cada directiva altera nuestro template de distintas maneras.
Veamos cómo en los siguientes ejemplos.
-
check_circle_outlineMódulo 1 | 7 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 9 clases
Primeros pasos con Angular
expand_more -
check_circle_outlineMódulo 3 | 21 clases
Componentes a detalle
expand_more-
done_all
Clase 1
Expresiones de un template de Angular
-
done_all
Clase 2
Sincronización de datos (Data Binding)
-
done_all
Clase 3
One way binding (interpolación)
-
done_all
Clase 4
Property binding
-
done_all
Clase 5
ngClass
-
done_all
Clase 6
Directivas Estructurales
-
done_all
Clase 7
ngIf
-
done_all
Clase 8
Ejercicio con ngIf y ngClass
-
done_all
Clase 9
ngFor
-
done_all
Clase 10
ngSwitch
-
done_all
Clase 11
Eventos
-
done_all
Clase 12
Nuevo componente para siguientes ejemplos
-
done_all
Clase 13
Payload de un evento con $event
-
done_all
Clase 14
Eventos personalizados (EventEmitter)
-
done_all
Clase 15
Input properties
-
done_all
Clase 16
Variables de referencia del template
-
done_all
Clase 17
Two way binding con ngModel
-
done_all
Clase 18
Pipes
-
done_all
Clase 19
Cómo crear mi propio Pipe
-
done_all
Clase 20
Cómo crear mi propia directiva de atributo
-
done_all
Clase 21
HostListener para eventos
-
-
check_circle_outlineMódulo 4 | 14 clases
Servicios y Observadores
expand_more -
check_circle_outlineMódulo 5 | 7 clases
Animaciones
expand_more -
check_circle_outlineMódulo 6 | 2 clases
Cierre del curso
expand_more