Una de las características de angular es la de crear aplicaciones spa con contenido segmentado y dinámico. La primera característica se consigue gracias a la creación de los componentes vistos en la entrada anterior y la segunda gracias a elementos como las directivas estructurales, las cuales permiten modificar el DOM de la página mediante las directivas estructurales. Por lo tanto se puede definir a las directivas estructurales como atributos que se aplican a elementos de HTML las cuales posibilitan la creación, eliminación y/o modificación de elementos del DOM que estén dentro de la etiqueta donde han sido aplicados. En esta entrada se verán las directivas ngIf y nfFor. Ambas directivas son fácilmente reconocibles ya que siempre van precedidas del carácter *
ngIf
Esta directa muestra u oculta el contenido de una etiqueta HTML cuando el resultado de la expresión a la que está igualada da como resultado verdadero o falso respectivamente. La igualdad puede ser o bien a un código JS o a una función del archivo typeScript lineado a la template.
<div class=" col ">
<h1>COLUMNA 1</h1>
<hr />
<div class="card ">
<img src="../../../assets/images/ngif.png " class="card-img-top " alt="... " />
<div class="card-body ">
<h5 class="card-title ">ngif</h5>
<p class="card-text ">
Aplicación de la directiva ngIf a un código de html
</p>
</div>
</div>
<button type="button " class="btn btn-outline-info " style="width: 100% " (click)="mostrarElementoNgIf() ">
Mostrar / Ocultar
</button>
<div *ngIf="mostrandoIf " class="container " style="align-content: center; margin-top: 20px ">
<p>
Parte del HTML que será cargada cuando la directiva ngIf de un valor de true en el div donde se aplica. Esta directiva se suele cambiar desde código mediante eventos, funciones, etc...
</p>
</div>
</div>
En este caso el div cuya clase es container tiene aplicada una directiva *ngIf igualada a una variable llamada mostrandoIf que está definida en el archivo .ts. Del mismo modo el botón tiene aplicado un evento click el cual ejecuta el método mostrarElementoNgIf() definido en el archivo .ts el cual modifica de verdadero a falso el contenido de la variable, haciendo visible o invisible el contenido del div
import { Component, Input } from "@angular/core";
@Component({
selector: "app-body",
templateUrl: "./body.component.html"
})
export class BodyComponent {
mostrandoIf: boolean = false;
mostrandoFor: boolean = false;
mostrarElementoNgIf() {
if (this.mostrandoIf) {
this.mostrandoIf = false;
console.log(this.mostrandoIf);
} else {
this.mostrandoIf = true;
console.log(this.mostrandoIf);
}
}
}
Del mismo modo, se puede aplicar un código js para modificar la variable sin necesidad de llamar a una función del código
<div class="col ">
<h1>COLUMNA 2</h1>
<hr />
<div class="card ">
<img src="../../../assets/images/ngfor.png " class="card-img-top " alt="... " />
<div class="card-body ">
<h5 class="card-title ">ngfor</h5>
<p class="card-text ">
Aplicación de la directiva nfFor a un código html
</p>
</div>
</div>
<button type="button " class="btn btn-outline-info " style="width: 100% " (click)="mostrandoFor=! mostrandoFor ">
Cargar datos
</button>
<div *ngIf="mostrandoFor " style="align-content: center; margin-top: 20px ">
<div>
<p>Los datos son cargados en una lista solo definiendo un elemento. Los datos se obtienen de un array situado en la clase .ts y son cargados mediante la directica *nfFor = let c of array, donde c representará cada uno de los elementos del
array
</p>
</div>
</div>
</div>
En este caso el botón en vez de llamar a una función , cambia el valor de la variable directamente mediante una negación de la misma
ngFor
Se trata de una directiva estructural que permite realizar repeticiones sobre un código HTML tomando como valores de la iteración los pertenecientes a una colección de datos. aquel lugar donde se aplique la directiva, será tantas veces repetido como elementos tenga la colección indicada. La estructura de la directiva es:
<div *ngFor= 'let indice of colección'>
{{indice.dato}}
</div>
Se repetirá el div tantas veces como elementos tenga la colección. Por cada iteración el valor de indice tomará el valor del elemento actual de la iteración. Para poder mostrar su contenido dentro del div se engloba entre {}.
<ul class="list-group list-group-flush ">
<li class="list-group-item" *ngFor="let c of lenguajes ">{{ c }}</li>
</ul>
En este caso se creará una lista donde cada uno de los elementos de la lista será cada uno de los elementos de la colección lenguajes definida en el archivo ts asociado.
import { Component, Input } from "@angular/core";
@Component({
selector: "app-body",
templateUrl: "./body.component.html"
})
export class BodyComponent {
mostrandoIf: boolean = false;
mostrandoFor: boolean = false;
lenguajes: string[] = [
'Java',
'JavaScript',
'TypeScript',
'C#',
'Python',
'Powershell'
];
}
ngSwitch
El funcionamiento de esta directiva es exactamente igual que el de un switch de programación, donde el resultante de una expresión definirá cual es el elemento del DOM (el tag) que se mostrará. Para ello se utilizan los atributos [ngSwitch] igualado a una variable definida en código (la cual será la que cambie su valor) y los atributos *ngSwitchCase igualados a los posibles valores que puede tomar la variable. Cuando la variable tome el valor de uno de los *ngSwitchCase se mostrará el tag asignado. También se puede incluir un tag con el atributo *ngDefaultSwitch para que se muestre siempre y cuando el valor de la variable no está contemplado en ninguno de los casos
<div class="card-body" [ngSwitch]="mostrarSw">
<h5>ngSwitch</h5>
<div class="card-text">
Se mostrá un contenido dependiendo de una variable definida por
código. Lo intresante de esta directiva es que se puede modificar el
contenido del DOM en momento de ejecución. Para el ejemplo pulsar uno
de los tres siguientes botones para mostrar en div diferente
</div>
<div class="container-fluid top-space" style="justify-content: center">
<button type="button" class="btn btn-primary" (click)="mostrarSw = 1">
Mostrar caso 1
</button>
<button
type="button"
class="btn btn-secondary"
(click)="mostrarSw = 2"
>
Mostrar caso 2
</button>
<button type="button" class="btn btn-success" (click)="mostrarSw = 3">
Mostrar caso 3
</button>
</div>
<div class="container-fluid top-space">
<div class="card-text alert alert-primary" *ngSwitchCase="1">
Aplicación de la directiva ngSwitch a un código de html, donde
aparece un un tag determinado dependiendo del contenido de una
variable. Este es el ejemplo para el caso A
</div>
<div class="card-text alert alert-secondary" *ngSwitchCase="2">
Aplicación de la directiva ngSwitch a un código de html, donde
aparece un un tag determinado dependiendo del contenido de una
variable. Este es el ejemplo para el caso B
</div>
<div class="card-text alert alert-success" *ngSwitchCase="3">
Aplicación de la directiva ngSwitch a un código de html, donde
aparece un un tag determinado dependiendo del contenido de una
variable. Este es el ejemplo para el caso C
</div>
<div class="card-text alert alert-info" *ngSwitchDefault>
Aplicación de la directiva ngSwitch a un código de html, donde
aparece un un tag determinado dependiendo del contenido de una
variable. Este es el ejemplo para el caso por defecto
</div>
</div>
</div>
En este caso el div de la línea 1 tiene el atributo ngSwitch asignado a una variable llamada mostrarSw, la cual está declarada en la clase directiva.component.ts como un number
export class DirectivasComponent {
mostrandoIf = false;
mostrandoFor = false;
mostrarSw = 1;
lenguajes: string[] = [
'Java',
'JavaScript',
'TypeScript',
'C#',
'Python',
'Powershell'
];
}
Con la pulsación de cada uno de los botones, en el evento (click), se programa el cambio del valor de la variable. En las etiquetas contenidas en el div de la linea 26 se puede observar como se les asigna un valor con ngSwitchCase de 1, 2 y 3, por lo que cuando la variable tome alguno de esos valores, se mostrará el div al que esté asignado el valor actual de la variable
El código completo tanto html como ts es el siguiente:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-directivas',
templateUrl: './directivas.component.html',
styleUrls: ['./directivas.component.css']
})
export class DirectivasComponent {
mostrandoIf = false;
mostrandoFor = false;
mostrarSw = 1;
lenguajes: string[] = [
'Java',
'JavaScript',
'TypeScript',
'C#',
'Python',
'Powershell'
];
mostrarElementoNgIf() {
if (this.mostrandoIf) {
this.mostrandoIf = false;
console.log(this.mostrandoIf);
} else {
this.mostrandoIf = true;
console.log(this.mostrandoIf);
}
}
}
<div class="row">
<div class=" col ">
<h1 style="text-align: center">NG IF</h1>
<hr />
<div class="card ">
<img src="../../../assets/images/ngif.png " class="card-img-top " alt="... " />
<div class="card-body ">
<h5 class="card-title ">ngif</h5>
<p class="card-text ">
Aplicación de la directiva ngIf a un código de html
</p>
</div>
</div>
<button type="button " class="btn btn-outline-info " style="width: 100% " (click)="mostrarElementoNgIf()">
Mostrar / Ocultar
</button>
<div *ngIf="mostrandoIf" class="container " style="align-content: center; margin-top: 20px ">
<p>
Parte del HTML que será cargada cuando la directiva ngIf de un valor de true en el div donde se aplica. Esta directiva se suele cambiar desde código mediante eventos, funciones, etc...
</p>
</div>
</div>
<div class="col ">
<h1 style="text-align: center">NG FOR</h1>
<hr />
<div class="card ">
<img src="../../../assets/images/ngfor.png " class="card-img-top " alt="... " />
<div class="card-body ">
<h5 class="card-title ">ngfor</h5>
<p class="card-text ">
Aplicación de la directiva nfFor a un código html
</p>
</div>
</div>
<button type="button " class="btn btn-outline-info " style="width: 100% " (click)="mostrandoFor = !mostrandoFor">
Cargar datos
</button>
<div *ngIf="mostrandoFor" style="align-content: center; margin-top: 20px ">
<div>
<p>
Los datos son cargados en una lista solo definiendo un elemento. Los datos se obtienen de un array situado en la clase .ts y son cargados mediante la directica *nfFor = let c of array, donde c representará cada uno de los elementos del array
</p>
</div>
<ul class="list-group list-group-flush ">
<li class="list-group-item" *ngFor="let c of lenguajes">{{ c }}</li>
</ul>
</div>
</div>
</div>
<div class="row top-space" style="justify-content: center">
<div class="col col-7">
<h1 style="text-align: center">NG SWITCH</h1>
<hr />
<div class="card ">
<img src="../../../assets/images/ngsw.png " class="card-img-top img-fluid" alt="... " />
<div class="card-body" [ngSwitch]="mostrarSw">
<h5>ngSwitch</h5>
<div class="card-text">
Se mostrá un contenido dependiendo de una variable definida por código. Lo intresante de esta directiva es que se puede modificar el contenido del DOM en momento de ejecución. Para el ejemplo pulsar uno de los tres siguientes botones para mostrar en div
diferente
</div>
<div class="container-fluid top-space" style="justify-content: center">
<button type="button" class="btn btn-primary" (click)="mostrarSw = 1">
Mostrar caso 1
</button>
<button type="button" class="btn btn-secondary" (click)="mostrarSw = 2">
Mostrar caso 2
</button>
<button type="button" class="btn btn-success" (click)="mostrarSw = 3">
Mostrar caso 3
</button>
</div>
<div class="container-fluid top-space">
<div class="card-text alert alert-primary" *ngSwitchCase="1">
Aplicación de la directiva ngSwitch a un código de html, donde aparece un un tag determinado dependiendo del contenido de una variable. Este es el ejemplo para el caso A
</div>
<div class="card-text alert alert-secondary" *ngSwitchCase="2">
Aplicación de la directiva ngSwitch a un código de html, donde aparece un un tag determinado dependiendo del contenido de una variable. Este es el ejemplo para el caso B
</div>
<div class="card-text alert alert-success" *ngSwitchCase="3">
Aplicación de la directiva ngSwitch a un código de html, donde aparece un un tag determinado dependiendo del contenido de una variable. Este es el ejemplo para el caso C
</div>
<div class="card-text alert alert-info" *ngSwitchDefault>
Aplicación de la directiva ngSwitch a un código de html, donde aparece un un tag determinado dependiendo del contenido de una variable. Este es el ejemplo para el caso por defecto
</div>
</div>
</div>
</div>
</div>
</div>