Directiva ngSwitch

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

deja tu lo interesante, lo potente…

Usuario anónimo

User

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

Hace 9 años•editado

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

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

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

"Si dije cercano o dije lejano" jajaja

LUIS CAIZA

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

Buen ejercicio

Usuario anónimo

User

La practica mejora las habilidades.

Yossijaki Jorge Astilleros Chávez

Most Epic Moment!!!

Miguel Angel Sirlopu Cumpa

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

¿Cómo se implementa el case default?

Diego Forero

Team Platzi

Se usa la directiva *ngSwitchDefault.

Puedes ver la documentación oficial

Cristian Palta

buenas clases

Eduardo Flores

¿ngSwitch solo funciona con enteros?

Miguel Gil Rosas

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

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

el clasico swith

Loreto Maureira

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

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

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

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

Edwin Alberto Guerrero Acosta

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

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

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

Muy cercano: green cercano: yellow lejano:red

William Gabriel Sanchez Acosta

<!-- 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

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

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

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

Joseph Monsalve

<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

[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