angular tutorial

Angular 5 – directivas if, for y switch y como usarlas

Facilitando la vida con directivas en angular.

Las directivas en angular siempre ha sido una de las formas más fácil de usar pequeños fragmentos de código.

Recordemos que en angular se divide en 3 archivos, ts (typescript), html y css, en teoría si queremos hacer lógica debemos programar en el archivo TS.

Pero las directivas son como la excepción de las reglas, son pequeñas sentencia que se anexan al html y este tiene su función nativa en javascript.

Directivas Ng If

Una de las directivas que usaremos mucho es el ng if , por supuesto, esta directiva es para hacer una decisión simple, por ejemplo en el archivo ts:

Color:boolean = true;

En esta ocasión voy a evaluar si el color es true aparezca una un mensaje, y si no, no va a aparecer nada.

Html:

<p *ngIf=”Color==true”>tengo color</p>

La explicación

Color, es el nombre de variables que hice en el archivo TS, con la directiva va a leer automáticamente nuestras variables, si ng if envía true va a imprimir la línea, en caso que el resultado sea false, ignorara la linea.

También podemos usar else y then

Como cualquier if podemos decidir con un else este se maneja de la siguiente manera.

<div *ngIf=“condition; else elseBlock”></div>
<ng-template #elseBlock>…</ng-template>

Usando then:

<div *ngIf=”condición; then thenBlock else elseBlock”></div>
<ng-template #thenBlock>…</ng-template>
<ng-template #elseBlock>…</ng-template>

Directiva ng for

Ng For lo usaremos para hacer un loop de elementos, por ejemplo hacer una lista dinámica, o un bloque de información por ejemplo:

Lista de lenguajes en mi nueva website:

<mat-tab label=”Front End”>
<div class=”content”>
<div class=”tecno” *ngFor=”let fend of front; let o = index;” >
<h2>{{fend.tec}}</h2>
<img src=”./assets/img/{{fend.tec}}.jpg” alt=”Desarrollo en {{fend.tec}}” />
<div class=”infos”>
<p>Desarrollados {{fend.tot}} proyectos.</p>
</div>
</div>
</div>
</mat-tab>

Con esto creo una lista dinámica de manera muy sencilla el código TS

front:any[] =[{tec:”Android”,tot:”más de 5″},{tec:”Angular”,tot:”3″},{tec:”Asp”,tot:”3″},{tec:”Csharp”,tot:”más de 5″},{tec:”Css3″,tot:”más de 10″},{tec:”Html5″,tot:”más de 10″},{tec:”Ionic”,tot:”1″},{tec:”Javascript”,tot:”más de 10″},{tec:”Jquery”,tot:”más de 10″},{tec:”React”,tot:”1″},{tec:”Php”,tot:”más de 5″}];

La explicación

Creamos un array en angular para poder hacer un ciclo, en ng for debemos crear una variable temporal (let) que pertenece (of) al nombre de variables de ts

Por ejemplo

*ngFor=”let fend of front;”

fend podemos utilizarlo en cualquier sección en este caso mi array/objeto tiene los siguientes propiedades

* Tec

* Tod

En angular para acceder a una variable en typescript se hace de la siguiente forma

<P>{{fend.tec}}</p>

Y si está variable lo usarás en una directiva o pipe se usa asi

*ngIf=”fend.tec==android”

Directiva Ng Switch

Para usar ng switch debemos escribir las posibles opciones como todas las directivas anteriores usaremos el archivo htmo y ts.

En este caso escribirnos un div distinto por cada valor a evaluar, en el siguiente caso i es un index de un loop

<div [ngSwitch]=”i”>
<div *ngSwitchCase=”0″>
<div class=”working” *ngFor=”let working of srb”>

<div class=”wimg”>
<img src=”./assets/img/{{working.photo}}” class=”img100″ />
</div>
<div class=”winfo”>
<h2>{{working.name}}</h2>
<h3>{{working.dev}}</h3>
<a href=”{{working.url}}” target=”_blank”><button mat-button color=”primary”>Ver</button></a>
</div>
</div>
</div>
<div *ngSwitchCase=”1″>
<div class=”working” *ngFor=”let working of copico”>

<div class=”wimg”>
<img src=”./assets/img/{{working.photo}}” class=”img100″ />
</div>
<div class=”winfo”>
<h2>{{working.name}}</h2>
<h3>{{working.dev}}</h3>
<a href=”{{working.url}}” target=”_blank”><button mat-button color=”primary”>Ver</button></a>
</div>
</div>
</div>

Podemos ver que necesitamos dos llamadas importante

<div [ngSwitch]=”i”>
<div *ngSwitchCase=”0″>

La explicación

[NgSwitch] se usa para declarar la variable que evalúa y *ngSwitchCase son los casos donde concuerde la evaluación.

Si desean analizar mas a fondo dejaré el link del proyecto que estoy trabajando

Nueva web

Aunque hay muchas más directivas son las que al principio usaremos más, recuerden que en la página de angular podemos encontrar más ejemplos.

2 comments

  1. Buen resumen Cesar. Estaba buscando otra cosa, y he descubierto este sitio de casualidad. Me gusta, y lo pongo en mis favoritos.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.