Las directivas estructurales son responsables de la estructura y el diseño del elemento DOM. Se utiliza para ocultar o mostrar las cosas en el DOM. Las Directivas Estructurales se pueden identificar fácilmente usando el ‘*’. Cada directiva estructural está precedida por un símbolo ‘*’.
Algunas de las directivas estructurales integradas con ejemplos son las siguientes:
1. *ngSi:
ngIf se usa para mostrar u ocultar el elemento DOM en función del valor de expresión que se le asignó. El valor de la expresión puede ser verdadero o falso.
Sintaxis:
<div *ngIf="boolean"> </div>
En la sintaxis anterior, booleano significa valor verdadero o falso. Por lo tanto, conduce a 2 sintaxis válidas como se muestra a continuación:
<div *ngIf="true"> </div> <div *ngIf="false"> </div>
Ejemplo de *ngIf:
<div *ngIf="false">
This text will be hidden
<h1 [ngStyle]="{'color':'#FF0000'}">
GFG Structural Directive Example
</h1>
</div>
<div *ngIf="true">
This text will be displayed
<h1 [ngStyle]="{'color':'#00FF00'}">
GFG Structural Directive Example
</h1>
</div>
Producción:
*ngIf Ejemplo
2. *ngIf-else:
ngIf-else funciona como una declaración If-else simple, en la que si la condición es verdadera, se representa el elemento DOM ‘If’, de lo contrario, se representa el otro elemento DOM. Angular usa ng-template con selector de elementos para mostrar la sección else en DOM.
Sintaxis:
<div *ngIf="boolean; else id_selector"> </div> <ng-template #id_selector> </ng-template>
En la sintaxis anterior, booleano significa valor verdadero o falso. Si el valor booleano es verdadero, el Elemento en If se representa en el DOM; de lo contrario, se representa otro elemento en el DOM.
Ejemplo de *ngIf- más:
<div *ngIf="false;else id_selector">
This text will be hidden
<h1 [ngStyle]="{'color':'#FF0000'}">
GFG Structural Directive
If Part
</h1>
</div>
<ng-template #id_selector>
This text will be displayed
<h1 [ngStyle]="{'color':'#00FF00'}">
GFG Structural Directive
Else Part
</h1>
</ng-template>
Producción:
*ngIf – más Ejemplo
3. *ngFor:
*ngFor se usa para recorrer las listas dinámicas en el DOM. Simplemente, se utiliza para crear listas y tablas de presentación de datos en HTML DOM.
Sintaxis:
<div *ngFor="let item of item-list"> </div>
Ejemplo de *ngFor:
Considere que tiene una lista como la que se muestra a continuación:
items = ["GfG 1", "GfG 2", "GfG 3", "GfG 4"];
<div *ngFor="let item of items">
<p > {{item}} </p>
</div>
Producción:
*ng Por ejemplo
Ejemplo-2 de *ngFor con índices:
considere que tiene una lista como se muestra a continuación:
items = ["GfG ", "GfG ", "GfG ", "GfG "];
<div *ngFor="let item of items;let i=index">
<p > {{item}} {{i}} </p>
</div>
Salida:
aquí, el índice comienza desde ‘0’ y no desde ‘1’
*ngFor con índices
4. *ngSwitch:
ngSwitch se usa para elegir entre varias declaraciones de casos definidas por las expresiones dentro de *ngSwitchCase y mostrarse en el elemento DOM de acuerdo con eso. Si no coincide ninguna expresión, se muestra el elemento DOM de caso predeterminado.
Sintaxis:
<div [ngSwitch]="expression"> <div *ngSwitchCase="expression_1"></div> <div *ngSwitchCase="expression_2"></div> <div *ngSwitchDefault></div> </div>
En la sintaxis anterior, la expresión se verifica con cada caso y luego el caso que coincide con la expresión se representa en el DOM; de lo contrario, el caso predeterminado se representa en el DOM.
Ejemplo de *ngSwitch:
<div [ngSwitch]="'one'"> <div *ngSwitchCase="'one'">One is Displayed</div> <div *ngSwitchCase="'two'">Two is Displayed</div> <div *ngSwitchDefault>Default Option is Displayed</div> </div>
En el ejemplo anterior, la expresión ‘uno’ en ngSwitch coincide con la expresión en ngSwitchCase. Por lo tanto, el Elemento que se muestra en DOM es «Se muestra uno».
Producción:
Ejemplo de caso ngSwitch