No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de *ngSwitch

14/22
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 69

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

Este es un CRUD con filtro b谩sico, us茅 bootstrap 5 https://angular-ivy-sj5wqd.stackblitz.io/

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.

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

Hhey, tom茅 las ideas de varios otros estudiantes, y utilizando lo aprendido, m谩s algo de bootstrap, y algo de investigaci贸n, pude hacer este ToDoList, o pizarra de notitas< 3 les comparto aqu铆 capture y el link para que puedan verlo c:

https://github-84qm3u.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.

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

Dure bastante tiempo en poder adecuarla a como quedo hoy, se que me falta mucho pero me siento ordullosa de mi 馃榿

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

Aqui esta mi pequena aplicacion hecha con lo aprendido hasta el moment.

Usuario: Nicobytes
Contrasena: angular

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

es poco pero es trabajo honesto, ahi vamos con angular
https://angular-ivy-vmpqah.stackblitz.io

Uso de *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.

Ejemplo:


<input type="text" required #inputNameNew="ngModel" [(ngModel)]="person.name"><br>
<!-- <p *ngIf="person.name === 'nicolas'">La persona es nicolas</p>
<p *ngIf="person.name === 'julian'">La persona es julian</p>
<p *ngIf="person.name === 'camilo'">La persona es camilo</p> -->

<div [ngSwitch]="person.name">
  <div *ngSwitchCase="'nicolas'">La persona es nicolas</div>
  <div *ngSwitchCase="'julian'">La persona es julian</div>
  <div *ngSwitchCase="'camilo'">La persona es camilo</div>
  <div *ngSwitchDefault>Usuario no conocido!</div>
</div>

Link de stackblitz:
https://angular-ivy-fxkpq6.stackblitz.io

Cree un sistema CRUD sencillo. Aqu铆 les comparto https://angular-ivy-tiyxq8.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.

Hice un to do app sencilla para practicar lo aprendido (:
https://angular-ivy-8mr7ts.stackblitz.io/

Pues ahora puse todas mis practicas en este enlace para que lo puedan ver, mientras hago algo que seguramente les va a gustar
https://angular-ivy-sd16pn.stackblitz.io

Es bueno cada clase pero el detalle es que cuando va a empezar toca pausar al inicio ya que crea un modelo para la clase pero no se ve cuando lo crea por lo que uno se puede perder f茅cilmente, como en el caso del ngSwitch, no se ve en qu茅 momento creo los input, los p

Por alguna extra帽a raz贸n StackBlitz no funciona, as铆 que les dejo el proyecto que hice:

app.component.ts:

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

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

  todos: string[] = [];

  doneTodos: string[] = [];

  finishedTodo: string[] = [];

  createTodo() {
    this.todos.push(this.todo);
    this.todo = '';
  }

  completeTodo(index: number) {
    this.finishedTodo = this.todos.splice(index, 1);
    this.doneTodos.push(this.finishedTodo[0]);
  }
}

app.component.html:

<h1>Todo list</h1>
<section>
  <label for="todo">
    Todo:
    <textarea name="todo" id="todo" cols="30" rows="10" [(ngModel)]="todo"></textarea>
  </label>
  <button (click)="createTodo()">Add todo</button>
</section>

<hr>

<section *ngIf="todos.length > 0">
  <h2>Todos:</h2>
  <ol>
    <li *ngFor="let todo of todos; index as index">
      {{ todo }}
      <button (click)="completeTodo(index)">Mark as done</button>
    </li>
  </ol>
</section>

<hr>

<section *ngIf="doneTodos.length > 0">
  <h2>Done todos:</h2>
  <ol>
    <li *ngFor="let done of doneTodos; index as index">
      {{ done }}
    </li>
  </ol>
</section>

Hice como proyecto mi sistema de inventario, lo hice m谩s bonito, a帽ad铆 m谩s funcionalidades, css, entre otras cosas 馃榿:
URL al proyecto

Comparto lo aprendido hasta ahora

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

Hice una lista de TODOs utilizando lo que hemos visto.
https://angular-ivy-w3fhsx.stackblitz.io

Les quiero compartir un peque帽o proyecto que hice de preguntas frecuentes, con lo aprendido hasta el momento.
https://angular-ivy-zkxcq1.stackblitz.io/

Hice un agregador de emotes
https://angular-ivy-dphyef.stackblitz.io/

Comparto mi aporte de lo visto en el curso
Excelentes explicaciones
https://angular-1edanu.stackblitz.io

Holiss a todos, este es mi mini ejercicio. Espero que os guste!
鈥> https://angular-ivy-uebs1p.stackblitz.io/

Hice una blockchain que mina transacciones entre solo 3 usuarios. Despues le agrego la funcionalidad para agregar mas personas a la red.
https://angular-ivy-9bqbug.stackblitz.io/

Hice una lista de personas que pueden o no, asistir a un evento, en este caso un partido de futbol. Solamente debe confirmar la asistencia

aplicaci贸n en angular

Hice una Todo List aplicando todo lo aprendido. La pueden ver aqui: https://angular-ivy-cwlews.stackblitz.io/

Prueba de tienda tipo supermercado
Espero les guste
https://angular-ivy-xfk5gm.stackblitz.io

Hice una app de lista de tareas https://angular-ivy-84ns1z.stackblitz.io/

Esto es un toDo List o una lista de tareas que se gardan en local storange鈥 El enlace es un snapshot de Gitpod:
https://gitpod.io#snapshot/d52f18d0-f0c0-4398-936e-f90a3e3d1dda

Realice el juego piedra, papel o tijera : )
link: https://angular-ivy-vqmt33.stackblitz.io

Hace a帽os que no subo aportes a Platzi, bueno esto no es tanto aporte pero es lo que avanc茅 en mi primer encuentro con Angular, lo capt茅 m谩s r谩pido que React la verdad, llevo como 1 a帽o desarrollando con React鈥

Lo que se lleva hasta el momento: https://angular-r27jqz.stackblitz.io

Comenzando, mi primer programa con angular
https://angular-ivy-ynj4sb.stackblitz.io

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/

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.