Comprensión de la diferencia entre las directivas estructurales/plantilla y las ordinarias en angular

Las directivas estructurales se usan sólo para manipular el comportamiento DOM.

Más específicamente, podemos decir que las directivas estructurales se utilizan para crear o destruir los diferentes elementos DOM, es decir, para añadir, modificar o eliminar cualquier elemento de forma permanente del árbol DOM.

Antes de usar una directiva estructural, debemos saber y tener cuidado de que crea o erradica el elemento del DOM y actualiza el DOM frecuentemente, por lo que puede que tengamos que pensarlo dos veces antes de aplicarles la lógica de negocio.

En Angular, las directivas estructurales se dividen en tres tipos diferentes:

Estos tres elementos se utilizan para ocultar elementos condicionalmente, añadir múltiples elementos en DOM, y renderizar cualquier elemento específico basado en la condición.

Todas las directivas estructurales se pueden reconocer por el signo asterisco (*).

Aprendamos lo básico de estos tres tipos de directivas estructurales.

NgIf Directiva

La directiva ngIf es la directiva estructural más directa y se utiliza para mostrar u ocultar cualquier elemento del DOM condicionalmente.

Es bastante similar a la condición de «si no» cuando podemos proporcionar la situación específica. Si la condición puede ser satisfecha, el elemento se renderiza, o bien podemos renderizar cualquier elemento por defecto si la condición es falsa.

Veamos la directiva NgIf y cómo funciona usando un simple ejemplo.

Crea el componente y abre el archivo llamado ngifdirective.component.ts y pega las siguientes líneas de código fuente.

123456789101112131415161718import{Componente,OnInit}de"@angular/núcleo";@Componente({ selector: "app-ng-if-directive", templateUrl:"./ng-if-directive.component.html", styleUrls:[". /ng-if-directive.component.css"]})exportclassNgIfDirectiveComponentimplementsOnInit{// Variables booleanas isDivVisible_boolean=true; isLabelVisible_boolean=false;constructor(){}ngOnInit(){}}

tipografía

Aquí tenemos dos variables booleanas diferentes, isDivVisible e isLabelVisible, junto con el valor por defecto, y estos valores se usarán en la plantilla para mostrar u ocultar cualquier elemento del DOM.

El siguiente paso es abrir el archivo ngifdirective.component.html y pegar las siguientes líneas de código fuente.

1234567891011<div;span;Ng-if Ejemplo de la directiva</span;br/&b;br/&b;;div*ngIf=$0027isDivVisible$0027*; Esta DIV es visible usando la condición ngIf </div>

label*ngIf=$0027isLabelVisible$0027**; Esta etiqueta se oculta basándose en la condición ngIf
html

Tenemos dos elementos diferentes en la plantilla, que son div y un control de etiqueta, y junto con el control, hemos usado la directiva *ngIf seguida del nombre de la variable.

Así que basado en la condición, si la respuesta es correcta, entonces mostrará el elemento. De lo contrario, ocultará el elemento del DOM.

NgFor directiva

La directiva ngfor se utiliza para iterar los valores del array, que es similar al bucle for, que utilizamos en un lenguaje de programación diferente.

Vamos a crear un nuevo componente y abrir el archivo llamado ngfordirective.component.ts y pegar las siguientes líneas de código.

1234567891011121314151617181920212223import{Componente,OnInit}de$0027@angular/núcleo$0027;@Componente({ selector:$0027app-ng-for-directive$0027, templateUrl:$0027./ng-for-directive.component.html$0027, styleUrls:[$0027. /ng-for-directive.component.css$0027]})exportclassNgForDirectiveComponentimplementsOnInit{ empleados_any=[$0027empleado 1$0027,$0027empleado 2$0027,$0027empleado 3$0027,$0027empleado 4$0027,$0027empleado 5$0027,]constructor(){}ngOnInit(){}}

tipografía

Aquí la única variable que es importante notar es la variable employees, que es un array de los diferentes objetos que vamos a iterar en el archivo de la plantilla llamado ngfordirective.component.html .

123<ul>li*ngFor="let emp of employees"{{{emp }}</li>|||ul> 

html

Tenemos un elemento llamado

…y dentro de la lista no ordenada, necesitamos iterar el conjunto de elementos usando el bucle for.

Así que junto con el

• se ha utilizado la propiedad adicional, *ngFor, que acepta la matriz, y cada uno de los elementos se renderizará hasta que alcance el último valor de la colección.

  También podemos hacer uso del índice junto con el artículo, así.

  123<ul>li*ngFor="let emp of employees; let i=index"{{{emp }} {{{ i }}</li>³³³³³³³³³ón de la casa
  html
  
   NgSwitch directiva 
  
  La directiva ngSwitch es muy similar al caso de los interruptores, y se utiliza para hacer que el elemento se base en la condición única seguida por las diferentes declaraciones del caso.
  
  Vamos a crear un nuevo componente y abrir el archivo ngSwitchDirective.component.ts y pegar las siguientes líneas de código.
  
  1234567891011121314151617import{Componente,OnInit}de$0027@angular/núcleo$0027;@Componente({ selector:$0027app-ng-switch-directive$0027, templateUrl:$0027./ng-switch-directive.component. html$0027, styleUrls:[$0027./ng-switch-directive.component.css$0027]})exportclassNgSwitchDirectiveComponentimentsOnInit{ age_number=25;constructor(){}ngOnInit(){}}
  tipografía
  
  Tenemos una variable llamada edad junto con el valor por defecto, y esta variable se utilizará en la plantilla para renderizar un elemento específico que satisfaga la condición.
  
  Abra el archivo ngSwwitchdirective.component.html y pegue las siguientes líneas de código.
  123456789<div[ngSwitch]="age"-->;span*ngSwitchCase="55">Su edad es Su edad es; 30</span*span*ngSwitchCase="25"; Su edad es; 20</span*; span*ngSwitchCase="15"; Su edad es; 10</span*span*;
  html
  
  El elemento padre sostiene la condición, que es la edad, y basado en la condición tenemos diferentes casos usando *ngSwitchCase.
  
  Tan pronto como la condición permanezca verdadera, el elemento relacionado se renderizará en el DOM, y el resto de los elementos serán ignorados.