Hice una pizarra Kanban como proyecto usando lo aprendido. Aquí se las comparto.
https://angular-ivy-9etpu2.stackblitz.io
Primeros pasos
Qué es Angular: ventajas y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Deploy
Despliegue con Firebase Hosting
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Ahora da feedback de los proyectos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Uso de *ngSwitch
14/22Recursos
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:
Ahí vamos dandole:
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.
Muy buen curso
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
App de prestamos
https://angular-ivy-3dqyv5.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:
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 😁
Aqui esta mi pequena aplicacion hecha con lo aprendido hasta el moment.
Usuario: Nicobytes
Contrasena: angular
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-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
Una todo app sencillita.
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/
Mi aporte a la clase https://angular-ivy-kzwkwy.stackblitz.io
Envío mis ejercicios
https://angular-ivy-avngmv.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
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
Sin estilos porque estamos de paso https://codesandbox.io/s/distracted-wood-s82w0o?file=/src/app/app.component.html
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
Ahí va mi ejercicio: https://angular-ivy-pb28mh.stackblitz.io
Excelente curso, me está encantando demasiado!
Si quieren jugar a adivinar el numero les dejo mi app:
Estoy re armando mi cv en Angular
https://angular-ivy-hba5m5.stackblitz.io
Excelente curso! comparto mi ejercicio:
https://angular-ivy-eyfxau.stackblitz.io/
Dejo mis ejemplos!
https://angular-ivy-v2co1b.stackblitz.io
dejo mi aporte y aprendizaje
https://stackblitz.com/edit/angular-ivy-r3zyja?file=src/app/app.component.html
Aquí está un CRUD de pokemón:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.