Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.
Introducción
¿Qué es el Angular CDK?
Instalando Angular CDK y TailwindCSS
Maquetando con Tailwind
Maquetando la página de login con Tailwind
Maquetando formularios con Tailwind
Componente de botón reutilizable
Reto: colores y propiedades dinámicas
Componentes interactivos con Angular CDK
Creando Overlays
Múltiples Overlays
Iconos en Angular con Font Awesome
Creando acordeones
Acordeones dinámicos
Drag and drop
Drag and drop con ordenamiento
Drag and drop con transferencia entre columnas
Drag and drop con columnas dinámicas
Modales y listas
Modales y diálogos
Modales recibiendo información
Listas con scroll
Listas con virtual scrolling
Table CDK
Tablas
Estilos en Tablas
Usando un DataSource en Tablas
Tablas con filtros y debounce
Próximos pasos para completar el Clon de Trello
Mejoras en UX y reusabilidad
Toma el Curso de Autenticación con Angular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 4
Nico muy interesante el curso, te muestro un poco lo que estoy haciendo.
Genial! Si la pagina web de Platzi https://platzi.com/home esta usando Angular, seria bueno que le apliquen este CDK para reordenar las rutas segun nuestra prioridad. En en App movil se puede pero en web no D:
Hola Me parece que no habría neecidad del if 'n el drop()
Si quieren prueben esto y también funciona.
drop(event: CdkDragDrop<Todo[]>) {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
)
}
Para los que no podían transferir tareas como a mi, posible solución que me ayudó. Me habia olvidado de transferir el CdkDropListGroup les dejo mi código (me sirvió mucho ver la documentación tambien original) Estoy utilizando angular 17
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import {
CdkDragDrop,
moveItemInArray,
transferArrayItem,
CdkDrag,
CdkDropList,
CdkDropListGroup,
} from '@angular/cdk/drag-drop';
import { ToDo } from '../../models/todo.model';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
faBox,
faWaveSquare,
} from '@fortawesome/free-solid-svg-icons';
import { faTrello } from '@fortawesome/free-brands-svg-icons';
@Component({
selector: 'app-board',
standalone: true,
imports: [
CommonModule,
NavbarComponent,
CdkDrag,
CdkDropList,
CdkDropListGroup, //esto es lo que me faltaba importar
FontAwesomeModule],
templateUrl: './board.component.html',
styles: [
`
.cdk-drag-animating {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .cdk-drag {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
`
]
})
Tenia problemas para poder realizar la transferencia entre columnas, lo resolvi agregando referencias al dom y agregando la directiva cdkDropListConnectedTo
<div class="text-sm mt-2 min-h-[2.5rem]" #todosList="cdkDropList" cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="todos"
[cdkDropListConnectedTo]="[doingList, doneList]">
<div class="text-sm mt-2 min-h-[2.5rem]" #doingList="cdkDropList" cdkDropList (cdkDropListDropped)="drop($event)"
[cdkDropListData]="doing" [cdkDropListConnectedTo]="[todosList, doneList]">
<div class="text-sm mt-2 min-h-[2.5rem]" #doneList="cdkDropList" cdkDropList
(cdkDropListDropped)="drop($event)" [cdkDropListData]="done"
[cdkDropListConnectedTo]="[todosList, doingList]">
genial esa funcionalidad
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?