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 82

Preguntas 11

Ordenar por:

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

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.

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

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

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

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

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

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

Usuario: Nicobytes
Contrasena: angular

https://angular-ivy-gjvvcq.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

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

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

Angular es genial!
Mi mini proyecto
https://angular-ivy-mkn3fs.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/

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.

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

Parece muy aletario el uso de las estructura dentro de los tags, me refiero: \*ngIf \*ngFor ... lo m谩s l贸gico es que para hacer un switch fuera \*ngSwitch, pero no, es \[ngSwitch] y cada case es ahora \*ngSwitchCase, 驴por qu茅?, pues porque yolo.
quien podr铆a ayudarme con este error , clone mi repositorio a otro pc y me sale el siguente error ![](https://static.platzi.com/media/user_upload/image-56a4705f-0e8c-4e7c-af82-e914a4b74155.jpg)

Saludos! Les comparto mi proyecto, es una app para agregar tus canciones favoritas.
https://stackblitz.com/edit/stackblitz-starters-hmra4k?file=src%2Fapp%2Fapp.component.html

Algunas de los temas aplicados en este proyecto son:

  • C贸mo utilizar la 鈥榠nterfaz鈥 para dar formato a objetos de datos de forma segura.
  • C贸mo integrar Bootstrap a angular.
  • Estilo b谩sico usando sass.
  • Data binding, property binding y event binding, *ngIf y *ngFor.
  • *ngFor para llamar din谩micamente a objetos desde un array.
  • Extraer un ID de una URL, usando expresiones regulares.
  • Interactuando con DomSanitizer de @angular/platform-browser.
  • Manipulaci贸n b谩sica de arrays con push() y splice().

Que es ngSwitch ?

El ngSwitch funciona como un switch com煤n de programaci贸n, cuando tenemos diferentes casos podemos anidar todos los if en una sola estructura de control.

Se har铆a de la siguiente forma:

<div [ngSwitch]="persona.name">
  <div *ngSwitchCase="'Juan'">hola soy Juan</div>
  <div *ngSwitchCase="'Camillo'">hola soy Camilo</div>
  <div *ngSwitchDefault>No soy nadie :(</div>
</div>
  • Para cada caso podemos definirle el valor que va a tomar con los case
  • y si no hay ninguno podemos definirle un valor con default

Hasta la clase pasada me hab铆a desarrollado un creador de productos. Vamos a ver qu茅 podemos mejorar con esta clase.

Muy interesante el recurso de stackblitz

Hice una especie de app de notas muy sencilla con lo aprendido hasta el momento.
https://angular-38hcf7.stackblitz.io

Elimina y agrega productos

Typescript

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  templateUrl: './template.html',
  imports: [CommonModule],
})
export class App {
  products: any[] = [];
  nameProduct: string = '';
  priceProduct: number;
  onSubmit = (event: Event) => {
    event.preventDefault();
    this.products.push({
      name: this.nameProduct,
      price: this.priceProduct,
    });
    this.nameProduct = '';
  };
  changeName(event: Event) {
    const inputN = event.target as HTMLInputElement;
    this.nameProduct = inputN.value;
  }
  changePrice(event: Event) {
    const inputP = event.target as HTMLInputElement;
    this.priceProduct = parseInt(inputP.value);
  }
  deleteProduct(index: number) {
    this.products.splice(index, 1);
    console.log(this.products);
  }
}

bootstrapApplication(App);

Template (HTML)

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>mi app</title>
  </head>
  <body>
    <h1>Fundamentos de angular</h1>
    <form (submit)="onSubmit($event)">
      <section>
        <label for="product-name">Nombre del producto:</label>
        <input
          [value]="nameProduct"
          type="text"
          required
          placeholder="ejemplo: manzana"
          (keyup)="changeName($event)"
        />
      </section>
      <section>
        <label for="product-price">Precio del producto:</label>
        <input
          type="number"
          required
          [value]="priceProduct"
          placeholder="20000"
          (keyup)="changePrice($event)"
        />
      </section>
      <div>
        <button type="submit">Agregar</button>
        <button type="reset">Limpiar</button>
      </div>
    </form>
    <main>
      <section>
        <h2>lista de productos</h2>
        <div *ngFor="let product of products; index as i">
          <h3>Nombre : {{product.name}} {{i}}</h3>
          <h3>Precio : $ {{product.price}}</h3>
          <button (click)="deleteProduct(i)">
            <i class="fa-sharp fa-solid fa-trash"></i>
          </button>
        </div>
      </section>
    </main>
  </body>
</html>

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

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

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

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.