Directiva ngSwitch

Resumen

Aprende a mostrar estados de cercanía de forma clara con Angular. Aquí verás cómo combinar ngSwitch (directiva de atributo) con ngSwitchCase (directiva estructural) y ngStyle para renderizar un único label por elemento y colorearlo según el nivel. Todo parte de un modelo con datos calculados en el servidor, eficiente para múltiples clientes.

¿Qué resuelve ngSwitch en una lista con cercanía?

La vista debe indicar si un lugar está muy cercano, cercano o lejano. Para ello, cada elemento tiene dos atributos definidos en el servidor: cercanía (niveles 1, 2, 3; 1 es más cercano, 3 más lejano) y distancia en kilómetros. El cálculo en el servidor es clave: se procesa una vez y queda disponible para un cliente de Angular, uno móvil o de escritorio. Así se mantiene consistencia y rendimiento.

Un único estado visible por lugar: muy cercano, cercano o lejano.
Niveles de cercanía: 1, 2 y 3; 1 es el más cercano.
Distancia en km como dato auxiliar: 1, 1.8, 5, 10, 35, 120.
Beneficio del servidor: cálculo centralizado para todos los clientes.
Habilidades: elegir directiva correcta, modelar atributos, y comunicar estados con claridad.

¿Cómo luce el modelo de datos?

Atributos por lugar: cercania (1–3). distancia (km).
El servidor entrega estos campos ya calculados.
La interfaz solo consume y muestra.

¿Cómo implementar ngSwitch y ngSwitchCase en Angular?

La directiva [ngSwitch] evalúa un valor y muestra solo el caso que coincide. Según se explica, no evalúa expresiones: debe haber un matching exacto o caer en un caso por defecto (default).

[ngSwitch]: directiva de atributo que decide el valor a evaluar.
ngSwitchCase: directiva estructural que agrega o remueve del DOM*.
Estrategia: evaluar lugar.cercania y mostrar un único label.

<!-- lista de lugares -->
<div *ngFor="let lugar of lugares">
  <div [ngSwitch]="lugar.cercania">
    <span *ngSwitchCase="1">Muy cercano</span>
    <span *ngSwitchCase="2">Cercano</span>
    <span *ngSwitchCase="3">Lejano</span>
    <!-- Si no hay coincidencia exacta, se usaría un caso por defecto. -->
  </div>
</div>

Buenas prácticas. - Mantén el valor de [ngSwitch] simple: lugar.cercania. - Usa casos explícitos 1, 2 y 3. - Recuerda que solo se muestra un caso a la vez.

¿Cómo combinar ngSwitch con ngStyle para dar feedback visual?

Para reforzar la lectura visual, se colorean los labels: verde para “Muy cercano”, negro para “Cercano” y rojo para “Lejano”. Importante en ngStyle: la evaluación debe ser un objeto entre llaves, de lo contrario verás un error en el navegador tras un refresh.

<div *ngFor="let lugar of lugares">
  <div [ngSwitch]="lugar.cercania">
    <span *ngSwitchCase="1" [ngStyle]="{ color: 'green' }">Muy cercano</span>
    <span *ngSwitchCase="2" [ngStyle]="{ color: 'black' }">Cercano</span>
    <span *ngSwitchCase="3" [ngStyle]="{ color: 'red' }">Lejano</span>
  </div>
</div>

Claves de implementación. - ngStyle es de atributo: espera un objeto con pares propiedad-valor. - color como propiedad CSS: 'green', 'black', 'red'. - Si olvidas las llaves en ngStyle, se produce un error.

¿Te gustaría ver un caso adicional por defecto o variar estilos según distancia? Cuéntalo en los comentarios y qué otros indicadores visuales usarías.

Jaime Diaz

student•

Pensaba lo mismo, pero mezclando esa parte nativa de CSS con lógica condicional es estupendo para jugar un poco con elementos de la vista de un componente dado, la verdad me parece bastante interesante esta característica.
Nos veremos más adelante en el curso.

Alejandra Guadalupe Larrañaga Altamirano

student•

deja tu lo interesante, lo potente…

Jaime Diaz

student•

Hola @aleehpandita, “deja tu lo interesante” te refieres a compartir el código del ejemplo y sus variantes en un repositorio?, de ser el caso con gusto lo hago.
Parte de mi filosofía como estudiante es incentivar/proponer a los compañeros actividades asociadas a los ejercicios de los cursos, no solo Angular, muchos tenemos una cuenta en Digitalocean u otro proveedor donde se podrían desplegar apps interesantes la cual sería la suma de todas esas partes (aportes de compañeros Platzi, grupos de estudio).
Quien comparta esa misma filosofía o método de estudio con gusto recibo el feedback u opiniones para comenzar inmediatamente con proyecto de este curso de Angular 4 para llevarlo a PRO.
Quedo pendiente de quien quiera participar en este proyecto para el Curso, ()

Sería interesante también que por cada Fork o mejora de un estudiante dado en un repositorio (grupo de estudio), sumen unos 100 puntos del Platzi Rank (o como lo ponderen)
Saludos @teamPlatzi, les agradezco sinceramente que lo tengan en cuenta y guste la idea.

Victor Alejandro Alvarez Tallada

student••

En los casos en los cuales no se tenga que evaluar nada en las directivas ngStyle y ngClass, no sería mejor solo utilizar los atributos style y class de siempre? o es una buena práctica de Angular, o da igual y solo lo usas por fines prácticos del curso?

Gabriel Palma

student•

Si no hay que evaluar nada utilizás class o style como siempre, ngClass y ngStyle se utilizan cuando hay alguna lógica asociada.

Diego Burlando

student•

Creo que el ngStyle seria redundante pero supongo que el profesor lo hace de manera que tengamos presente a la hora de practicar.

Luis David López Berber

student•

"Si dije cercano o dije lejano" jajaja

LUIS CAIZA

student•

Realice un ejercicio similar pero con persona y estaturas.

//en el ts
personas: any = [
        {estatura: 1.5 , porte: 'pequeño' , edad: 18 , nombre: 'Kevin'},
        {estatura: 1.8 , porte: 'mediano' , edad: 15 , nombre: 'Lui'},
        {estatura: 2.0 , porte: 'alto' , edad: 21 , nombre: 'Karla'},
        {estatura: 1.7 , porte: 'mediano' , edad: 14 , nombre: 'Roman'},
        {estatura: 2.2 , porte: 'alto' , edad: 25 , nombre: 'Juan'},
        {estatura: 1.4 , porte: 'pequeño' , edad: 28 , nombre: 'pedro'}
    ]

En el html

<h2>ngSwitch directiva que permite tomar varias alternativas</h2>
<ng-container *ngFor="let persona of personas; odd as esPar" [ngSwitch]="persona.porte">
    <li [ngStyle]="{color : (persona.edad>=18)? 'blue': 'red'}">
        {{persona.nombre}}-{{persona.edad}} años -
        <span *ngSwitchCase="'alto'" [ngStyle]="{color: 'green'}">alto({{persona.estatura}} mts)</span>
        <span *ngSwitchCase="'mediano'" [ngStyle]="{color: 'black'}">mediano({{persona.estatura}} mts)</span>
        <span *ngSwitchCase="'pequeño'" [ngStyle]="{color: 'orange'}">pequeño({{persona.estatura}} mts)</span>

    </li>
</ng-container>

Wilson Marino Pablo Mendez

student•

Buen ejercicio

Usuario anónimo

user•

La practica mejora las habilidades.

Yossijaki Jorge Astilleros Chávez

student•

Most Epic Moment!!!

Miguel Angel Sirlopu Cumpa

student•

Genial, hasta ahora para estos casos yo usaba una funcion que definia en el componente y hacia el switch a nivel de Js
Por ejemplo

{{getCargo(personal.cargo)}}

Y en el componente

getCargo(cargo){
	switch(cargo){
	case...
	}
	return ...
}

Esto en AngularJS me traía problemas porque se ejecutaba constantemente volviendo pesada la aplicación.
En angular 4 que es con el que actualmente trabajo no he revisado el caso.
Pero acabo de aprender esta nueva directiva.

Julian Parra

student•

¿Cómo se implementa el case default?

Diego Forero

Team Platzi•

Se usa la directiva *ngSwitchDefault.

Puedes ver la documentación oficial

Cristian Palta

student•

buenas clases

Eduardo Flores

student•

¿ngSwitch solo funciona con enteros?

Miguel Gil Rosas

student•

En javascript switch funciona con enteros, decimales (floats), strings y booleanos; o sea, con todos los tipos primitivos. Cómo Angular está escrito en javascript supongo que será igual, pero no lo he probado.

Joshua Nathanael Saucedo Uriarte

student•

yo lo he usado tambien para strings y char, pero tiene que ir entre comlla simple

<ul [ngSwitch]="persona.nombre">
  <li *ngSwitchCase="'Miguel'">hola Miguel</li>
  <li *ngSwitchCase="'Joshua'">hola Joshua</li>
  <li *ngSwitchDefault>No se como te llamas :S</li>
</ul>

Carlos Uriel de Jesus Sánchez González

student•

el clasico swith

Loreto Maureira

student•

Se cae cuando agrego el span con las directivas y aún no entiendo que estoy haciendo mal…lo he revisado muchas veces

Rodrigo Luna

student•

Hola, no estas cerrando tus etiquetas span, tienes que poner “/” en cada cierre.

<span *ngSwitchCase="1" [ngStyle]="{color:'green'}">Muy cercano</span>

César Espitia

student•

Por acá dejo mi código: html

<div class="textcenter">
  <h3>{{ title }} app is running!</h3>
  Tu nombre es {{ name }} {{ lastName }} <br />
  <input
    type="text"
    placeholder="Nombre"
    (keyup)="check()"
    [(ngModel)]="name"
  />
  <input
    type="text"
    placeholder="Apellido"
    (keyup)="check()"
    [(ngModel)]="lastName"
  />
  <button [disabled]="notReady" (click)="hello()">Hi</button>
</div>
<br />
<span class="textmarginleft">{{ coordinates }}</span>
<br />
<div class="inline" id="map"></div>
<div class="inline" id="list">
  <ul>
    <ng-container *ngFor="let place of places; let i = index">
      <li *ngIf="place.active" [ngClass]="{ evennumber: (i + 1) % 2 === 0 }">
        {{ place.name }}
      </li>
    </ng-container>
  </ul>
  <ul>
    <ng-container *ngFor="let place of places; let i = index">
      <li
        [ngStyle]="{ 'text-decoration': place.active ? '' : 'line-through' }"
        [ngSwitch]="place.closeness"
      >
        {{ place.name }} -
        <span *ngSwitchCase="1" [ngStyle]="{ 'color': place.color }">Cercano</span>
        <span *ngSwitchCase="2" [ngStyle]="{ 'color': place.color }">Intermedio</span>
        <span *ngSwitchCase="3" [ngStyle]="{ 'color': place.color }">Lejano</span>
      </li>
    </ng-container>
  </ul>
</div>

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import * as mapboxgl from "mapbox-gl";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})

export class AppComponent implements OnInit {

  title: string = 'Angular';
  name: string = '';
  lastName: string = '';
  notReady: boolean = true;
  map: mapboxgl.Map;
  coordinates: any;
  places: any = [
    { color: '#00ff00', closeness: 1, distance: 3, active: true, name: "Florería la Gardenia" },
    { color: '#360000', closeness: 3, distance: 50, active: true, name: "Donas Vida Dulce" },
    { color: '#00ff00', closeness: 1, distance: 8, active: true, name: "Veterinaria Huellitas" },
    { color: '#360000', closeness: 3, distance: 30, active: true, name: "Sushi Roll" },
    { color: '#baf73c', closeness: 2, distance: 10, active: false, name: "Hotel la Gracia" },
    { color: '#baf73c', closeness: 2, distance: 20, active: false, name: "Zapatería Clavo" },
  ];

  ngOnInit():void {
    mapboxgl.accessToken = environment.mapboxKey;
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.0700526, 4.6489681],
      zoom: 10
    });
    this.createMarker(-74.0700526, 4.6489681)
  }

  createMarker(lng: number, lat: number): void {
    const marker = new mapboxgl.Marker({
      draggable: true
    })
    .setLngLat([lng, lat])
    .addTo(this.map)

    marker.on('drag', () => {
      this.coordinates = marker.getLngLat()
    })
  }

  check():void {
    if (this.name === '' || this.lastName === '') {
      this.notReady = true;
    } else {
      this.notReady = false;
    }
  }

  hello():void {
    alert(`Welcome to this App ${this.name} ${this.lastName}`);
  }

}

sass

#map
  margin-left: 100px
  width: 650px
  height: 450px
  background-color: #006060

#list
  margin-left: 10px
  vertical-align: top

.textcenter
  text-align: center

.inline
  display: inline-block

.textmarginleft
  margin-left: 100px

.evennumber
  background-color: #4c6f7b

Ignacio Duarte

student•

Como hace para escribir cercania en varios renglones a la vez?

Edwin Alberto Guerrero Acosta

student•

Para agregar más cursores(en mi caso uso Visual estudio code) presionas la tecla:

alt + click(en la linea que quieres agregar otro cursor)

asi podras editar varias lineas a la vez

Carlos Eduardo Garcia Tejeda

student•

Uso de ngSwitch con template:

<p [ngSwitch]="valorencomponentedeswitch">
	<template [ngSwitchCase]="1">Forma Switch 2</template>
	<template [ngSwitchCase]="2">Forma Switch 2a</template>
	<template [ngSwitchCase]="5">Forma Switch 2b</template>
	<template ngSwitchDefault>Forma Switch 2v</template>
</p>
Donde template es palabra reservada, y ngSwitchDefault es directo sin Corchetes

Carlos Ferrer

student•

Muy interesante, desconocía la existencia de esa etiqueta, comparto enlace:

y como curiosidad, un enlace que me ha aparecido al googlear, a una página de Cristalab donde se trató el tema de la etiqueta <template> :

Wilson Marino Pablo Mendez

student•

Muy cercano: green cercano: yellow lejano:red

William Gabriel Sanchez Acosta

student•

<!-- lista de lugares completa -->
<ul>
  <ng-container *ngFor="let place of Places; let i =index" [ngSwitch]='place.cercania'>
    <!-- <li [ngStyle]="{'color': (place.stateActive) ?'blue' :'red'}" [ngClass]="{'numero_par': (i%2==0)}"> -->
      <li [ngStyle]="{'color': 'black'}" [ngClass]="{'numero_par': (i%2==0)}">
      {{place.nombre}} -

      <span *ngSwitchCase="1" [ngStyle]="{'background-color': 'green'}">Muy cerca</span>
      <span *ngSwitchCase="2" [ngStyle]="{'background-color': 'yellow'}">Cerca</span>
      <span *ngSwitchCase="3" [ngStyle]="{'background-color': 'red'}">Lejos</span>
    
    </li>
  </ng-container>
</ul>```

Yesid Anacona

student•

Porqué cuando trato de cambiar el background color con la directiva ngStyle no me funciona? Mi código es

<ul>
        <ng-container *ngFor="let i of listalugares">
        <li *ngIf="i.pacientes<10" [ngStyle]="{background-color: (i.pacientes<10)? 'aliceblue' : 'green'}"><a href="">{{i.nombre}} </a> tiene {{i.pacientes}} pacientes</li>
      </ng-container>
      </ul>```

Víctor Hugo Rivas Sánchez

student•

Hola Yesid. Background color debe ir entre comillas simples. Ejemplo:

[ngStyle]="{'background-color':'green'}"

Joseph Monsalve

student•

<ng-container *ngFor="let lugar of lugares; let i = index" [ngSwitch]="lugar.cercania"> <li [ngStyle]="{color:(lugar.active)? 'black' :'gray'}"[ngClass]="{numero_par:(i+1) %2 ==0}"> {{lugar.nombre}} - <span *ngSwitchCase="1" [ngStyle]="{color: 'green'}">Muy Cercano</span> <span *ngSwitchCase="2" [ngStyle]="{color: 'black'}">Cercano </span> <span *ngSwitchCase="3" [ngStyle]="{color: 'red'}">Lejano</span> </li> </ng-container>

Juan Esteban Deossa Pertuz

student•

[NgSwitch] es una directiva de atributo pero que para su correcto funcionamiento se ha de usar con una directiva de estructura, esta directiva estructural es *ngSwitchCase=”valueOfMatching”. El [ngSwitch] recibe como valor la variable o propiedad la cual se comparará con los casos. Mientas que el valor de *ngSwitchCase es el valor del matching, los valores de este *ngSwitchCase solo pueden ser booleanos. Ejemplo:

<ul> <ng-container *ngFor=”let persona of personas” [ngSwitch]=”persona.vivo” > <li *ngSwitchCase=”true”> {{persona.nombre}} - <h4 > Vive </h4> </li> <li *ngSwitchCase=”false”> {{persona.nombre}} - <h4 > Muerto</h4> </li> </ng-container> </ul>

Newman Fajardo

student•

<div>
    <button type="button" (click) = "changeTitle( 'Nuevo nombre' )" > Click me! </button>
    <br>
    <hr/>
    <br>
    <input type="text" placeholder="Ingrese nombre" [(ngModel)] = "firstName" />
    <br>
    <input type="text" placeholder="Ingrese Apellido" [(ngModel)] = "lastName" />
    <br>
    <input type="text" placeholder="Ingrese Edad" [(ngModel)] = "age" />
    <br>
    <button type="button" (click) = "addPerson()" > Agregar! </button>
    <br>
    <span> {{message}} </span>
    <br>
    <div> Lista de activos </div>
    <ul>
      <ng-container *ngFor="let person of persons">
          <li *ngIf="person.active && person.age > 17"> 
            {{person.firstName}} - {{person.lastName}} - {{person.age}} 
            <span (click) = "deletePerson(person.id)" > x </span>
          </li>
      </ng-container>
    </ul>

    <div> Lista de personas </div>
    <ul>
      <ng-container *ngFor="let person of persons; let i = index">
          <li 
            [ngStyle] = "{ color: (person.active) ? 'black' : 'grey' }" 
            [ngClass] = "{ impar:(i+1) % 2 !== 0, par:(i+1) % 2 === 0 }"
            [ngSwitch] = "person.active"> 
              {{person.firstName}} - {{person.lastName}} - {{person.age}} 
              <span *ngSwitchCase = "true" [ngStyle] = "{color:'green'}"> Activo</span>
              <span *ngSwitchCase = "false" [ngStyle] = "{color:'red'}"> Borrado </span>
              <span *ngIf = "person.active" (click) = "deletePerson(person.id)" > x </span>
          </li>
      </ng-container>
    </ul>
  </div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'berckmanCurso';
  firstName:string = "";
  lastName:string = "";
  age:numbre = 0;
  message:string = "";
  count = 1;

  persons:Array<Object> = [
    {id: 1, firstName: "Newman" , lastName: "Fajardo", active:true, age: 25 }
  ];
 
  changeTitle(title){
    this.title = title;
  }

  addPerson(){
    this.count++;
    this.persons.push({
      id: this.count,
      firstName: this.firstName , 
      lastName: this.lastName,
      age: this.age,
      active:true
    });
    this.message = "Persona guardada";

    setTimeout( () => { this.message = ""; } , 2000 );
  }

  deletePerson(id){
    this.persons = this.persons.map( person => {
      if (person.id == id) {
        person.active = false;
      }
      return person;
    });
  }
}

Directiva ngSwitch

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS