Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Uso de *ngSwitch

14/21
Recursos

Angular también ofrece la sentencia *ngSwitch y *ngSwitchCase para determinar el flujo de control de tu aplicación y qué elemento mostrar entre multiples elementos HTML. Además de utilizar un elemento default con *ngSwitchDefault en caso de que ninguna condición se cumpla.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    color: string = 'verde';
}

Ejemplo de *ngSwitchCase

<div [ngSwitch]="color">
    <p *ngSwitchCase="'azul'">
        El color el Azul
    </p>
    <p *ngSwitchCase="'verde'">
        El color el Verde
    </p>
    <p *ngSwitchCase="'rojo'">
        El color el Rojo
    </p>
    <p *ngSwitchDefault>
        No hay ningún color
    </p>
</div>

Aporte creado por: Kevin Fiorentino.

Aportes 25

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hice una pizarra Kanban como proyecto usando lo aprendido. Aquí se las comparto.
https://angular-ivy-9etpu2.stackblitz.io

Buena herramienta para practicar

Esta app la hice casi 2 horas, Uff

https://stackblitz.com/edit/angular-ivy-6qjv3n?file=src/app/app.component.ts

Además de usar unas estructuras de control en el .ts y CSS, lo demás es lo visto durante el curso:
https://angular-ivy-6ffejk.stackblitz.io

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.

Aquí mi práctica de lo que voy aprendiendo con este curso, espero sus comentarios. ♥
https://angular-ivy-ycsufg.stackblitz.io

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.

Excelente curso, me está encantando demasiado!

Si quieren jugar a adivinar el numero les dejo mi app:

https://angular-ivy-2dvc4k.stackblitz.io

Estoy re armando mi cv en Angular
https://angular-ivy-hba5m5.stackblitz.io

Excelente curso! comparto mi ejercicio:
https://angular-ivy-eyfxau.stackblitz.io/

Gran curso, todo el aprendizaje hasta ahora:

https://angular-ivy-y8gqaq.stackblitz.io

https://angular-ivy-ix9ur8.stackblitz.io

Todo lo aprendido hasta el momento.

Aquí está un CRUD de pokemón:

https://angular-ivy-kvkcdg.stackblitz.io

Hola hola
Vamos practicando…

https://angular-ivy-t412xb.stackblitz.io

Muchas gracias.

Ahí les va. Algo sencillo porque vamos paso a paso, solo poniendo en practica lo aprendido en angular en este proyectito.
https://angular-ivy-nlp3lp.stackblitz.io