Angular Directivas estructurales

Cuando se trata de controlar la apariencia de la apariencia de los elementos del árbol visual en WPF, la manera más común es usar el enlace y el convertidor de visibilidad, lo que requiere algunos recursos lógicos y estáticos adicionales. Angular también tiene una técnica similar, que cambia la apariencia o el comportamiento de un elemento DOM: las directivas Angular. Uno de los Angular directives tipos es que structural directives cambian el diseño del DOM agregando o eliminando elementos del DOM.

En este tema, vamos a demostrar las siguientes tres directivas estructurales: ngIf, ngSwitch y ngFor. Como se puede ver por sus nombres, cada uno de ellos se puede comparar con una estructura de C#. ngIf es lo mismo que un bloque de código C# "if-else", ngSwitch es lo mismo que la instrucción switch-case de C# y, por último, ngFor es exactamente lo mismo que un "bucle for" de C#.

ngIf Directive

Exploremos cada una de estas directivas, comenzando con ngIf. Esta directiva nos permite mostrar u ocultar elementos en función de una condición booleana. Comenzaremos creando un elemento "div" con una etiqueta "h2" que contiene un nombre.

<div>
  <h2>John</h2>
</div>
html

Si guardamos esto, nuestro navegador mostrará el nombre John. Sin embargo, digamos que tenemos algún tipo de expresión booleana en la que queremos basar la condición de visibilidad de esta etiqueta "h2". Por ejemplo, agregaremos una propiedad llamada "isFirstName" y la estableceremos en falso. Para indicarle a nuestro div que se represente cuando isFirstName sea igual a verdadero, debemos usar la siguiente sintaxis *ngIf = "isFirstName".

public isFirstName = false;
typescript

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>
html

Una vez que guardemos los archivos, y debido a que isFirstName es falso, veremos que el nombre ya no se muestra en el navegador. Sin embargo, si actualizamos isFirstName para que sea verdadero, el nombre "John" se mostrará en el navegador. Si volvemos a establecer isFirstName en falso, notaremos que el nombre ya no se muestra en nuestro navegador, sino que está vacío. Ese es el comportamiento predeterminado de la declaración ngif: si la expresión es verdadera, representamos la plantilla proporcionada; de lo contrario, estará vacía.

Si tuviéramos que lograr el mismo comportamiento con WPF, necesitaríamos utilizar un convertidor de visibilidad. El código sería similar al siguiente:

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }
cs

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>
xml

En Angular, es mucho más fácil y sencillo.

Creemos un requisito que indique que si la propiedad isFirstName es falsa, queremos proporcionar un apellido. Para ello vamos a aprovechar la cláusula "else" de la directiva ngIf. Comencemos creando una ng-template que defina una etiqueta "h2" que contenga el apellido. Una ng-template es simplemente un marcador de posición que nos permite definir contenido que no forma parte del DOM, pero que se puede agregar mediante código, como usar la directiva ngIf. Pero, para poder utilizar esto en la directiva, debemos darle un nombre de variable de referencia de plantilla como "apellido". Ahora que hemos nombrado nuestra ng-template, vayamos a nuestra directiva ngIf, agreguemos "; else lastname" y guardemos esto. Debido a que "isFirstName" es falso, decimos que de lo contrario use el apellido, lo que significa que estamos usando la plantilla con el apellido.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>
html

Ahora, otra forma de escribir esto es decir "esNombre; luego nombre; de lo contrario, apellido". Entonces, para hacer eso, necesitamos crear otra plantilla llamada "nombre".

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>
html

Si cambiamos "isFirstName" a verdadero, el nombre se mostrará en el navegador. Y un último consejo sobre el uso de la directiva ngIf es que la expresión no se limita a una sola propiedad; en realidad, puede usar múltiples propiedades y/o funciones siempre que la expresión en su conjunto devuelva un resultado booleano. Por ejemplo, incluso podemos usar operadores lógicos como" && isValid || getIsValidName()".

ngSwitch Directive

La siguiente directiva que discutiremos es la directiva ngSwitch. Esto nos permite comparar una expresión con varias expresiones para decidir qué plantillas agregar o eliminar. Digamos que tenemos elementos "h2" que representan marcas de automóviles: Chevy, Ford y GMC. Nos gustaría mostrar solo uno de estos elementos según el valor de una propiedad "make" que hemos definido en nuestro archivo mecanografiado con un valor predeterminado de "Chevy". Para lograr esto necesitamos usar la directiva ngSwitch con la siguiente sintaxis [ngSwitch] = expression donde expresión es nuestra propiedad "make". Agregar esto al elemento "div" que envuelve las etiquetas "h2" no es suficiente. Al igual que en WPF, necesitamos agregar algunas declaraciones de "caso" a cada elemento "h2". La sintaxis para esto es *ngSwitchCase = expression. En este caso, estamos comparando directamente con el texto, por lo que agregaremos comillas simples alrededor del valor, lo que significa que el resultado final sería *ngSwitchCase = "'Chevy'" /similar para los otros dos valores/.

make = "Chevy";
typescript

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>
html

Una vez que guardemos eso, solo veremos la opción Chevy renderizada en el navegador porque el valor de nuestra propiedad "make" está establecido en "Chevy". Si lo cambiamos, para decir "GMC", y guardamos eso, solo se mostrará la opción GMC en el navegador. Ahora bien, ¿qué pasa si añadimos una opción que no está disponible, digamos el "Lambo"? No se rendiría nada porque eso no coincidía con ninguna de nuestras condiciones. Cuando normalmente usamos una instrucción switch dentro de C#, no solo tenemos el caso sino también el valor predeterminado. Lo mismo está disponible en Angular: podemos agregar otra opción con el texto "No encontrado" y marcarlo con el *ngSwitchDefault que actuará como el valor predeterminado si no se encuentra ninguno de los otros valores.

<h2 *ngSwitchDefault>Not Found</h2>
html

En este caso, si estamos buscando Lambo, no tenemos la opción Lambo, por lo que cambiamos al caso predeterminado que es "No encontrado", y "No encontrado" se muestra en nuestro navegador. Una cosa que debemos señalar es que estas son expresiones, por lo que podemos usar incluso una función siempre que devuelva un resultado que coincida con la expresión que estamos pasando. ¡Bastante simple!

ngFor Directive

La siguiente es la directiva ngFor. Esta directiva nos permite recorrer una colección de objetos y agregar una plantilla para cada elemento de esa colección. Comencemos agregando una colección de objetos en nuestro archivo mecanografiado. Llamaremos a esto una variedad de marcas y agregaremos Chevy, Ford, GMC y Dodge. A continuación, crearemos un "div" y para cada "div" crearemos una etiqueta "h2" que enumera el nombre de esa marca. Para hacer eso, usaremos la directiva ngFor, la sintaxis para eso *ngFor="let make of makes". Eso nos proporciona la posibilidad de utilizar la interpolación para utilizar la propiedad "make" que se define mediante la parte "let make" de la expresión e imprimirla en la etiqueta "h2".

makes = ["Chevy", "Ford", "GMC", "Dodge"];
typescript

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>
html

Si todo salió bien, deberíamos ver que para cada elemento de esa matriz estamos usando una etiqueta h2 para representarlo en el navegador. Además, la directiva ngFor proporciona algunos elementos de ayuda que nos permiten obtener más información sobre esa colección, como por ejemplo:

• "index as i" - nos permite determinar cuál es el índice de cada elemento

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>
html

• "first as f": nos permite saber si el artículo es el primero en la colección.

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>
html

• "último como l": también puede obtener la última fila o el último elemento de la colección

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>
html

• "impar como o" o "par como e": nos permite determinar si el elemento de la colección está en una posición par o impar

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>
html

Así de fácil es agregar y eliminar elementos a su vista en su aplicación angular: simplemente use una directiva estructural y listo.

Additional Resources

• Del escritorio a la web: Directivas estructurales en Angular
• Angular Directivas estructurales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub