Cursos Empresas Blog Live Conf Precios

Crear una nueva card: UI

Clase 15 de 22 • Curso Práctico de Angular: Construye un Clon de Trello

Clase anteriorSiguiente clase

Contenido del curso

Introducción

1
Bienvenida y setup del proyecto
05:31
2
Funcionamiento de la API y análisis del proyecto
04:32

Integración entre UI y API

3
Conectando los boards del usuario
11:28
4
Creando el card color component
19:00
5
Typing Colors
12:35
6
Detalle de un board
23:53

Drag and Drop

7
Algoritmo para detectar la posición de la card
12:16
8
Detectar tipo de movimiento: drag and drop
11:10
9
Calcular la posición
09:36
10
Actualizar una sola card
12:28
11
Actualizar lista
07:28

Boards

12
Crear un nuevo board: UI
20:12
13
Crear un nuevo board: conectar con la API
11:24
14
Cerrar el overlay
05:36

Cards

15
Crear una nueva card: UI
11:38
16
Crear una nueva card: formulario
07:54
17
Crear una nueva card: conectar con la API
15:39

Listas

18
Crear una nueva lista: UI
05:20
19
Crear una nueva list: conectar con la API
09:46

Backgrounds

20
Background dinámico
08:28
21
Estado para el Background
15:08

Próximos pasos

22
¿Quieres más cursos de Angular?
05:26

José Nicolás Aristizabal Ramírez

student•

una forma de lograr el mismo funcionamiento, pero con menos lineas de código sería la siguiente:

 openFormCard(list: List) {
    if (this.boardDetail?.lists) {
      this.boardDetail.lists = this.boardDetail?.lists.map((listD) => ({
        ...listD,
        showCardForm: listD.id === list.id,
      }));
    }
  }

David Fernando Rodriguez Delgado

student•

Bonita ejecución

Adrian Silva

student•

A mi me funcionó así:

openFormCard(listSel: List){
    if(this.board?.lists){
      this.board.lists.map(list => {
        list.id === listSel.id ? list.showForm = true : list.showForm = false;
      })
    }
  }

Escuelas

Desarrollo Web
English Academy
Marketing Digital
Inteligencia Artificial y Data Science
Ciberseguridad
Liderazgo y Habilidades Blandas
Diseño de Producto y UX
Contenido Audiovisual
Desarrollo Móvil
Diseño Gráfico y Arte Digital
Programación
Negocios
Blockchain y Web3
Recursos Humanos
Finanzas e Inversiones
Startups
Cloud Computing y DevOps

Platzi y comunidad

Platzi Business
Live Classes
Lanzamientos
Executive Program
Trabaja con nosotros
Podcast

Recursos

Manual de Marca

Soporte

Preguntas Frecuentes
Contáctanos

Legal

Términos y Condiciones
Privacidad
Tyc promociones

Reconocimientos

Reconocimientos

Top 40 Mejores EdTech del mundo · 2024

Primera Startup Latina admitida en YC · 2014

Primera Startup EdTech · 2018

CEO Ganador Medalla por la Educación T4 & HP · 2024

CEO Mejor Emprendedor del año · 2024

De LATAM conpara el mundo

Youtube Instagram LinkedIn TikTok Facebook X (Twitter)Threads