¿no se le puede dar like a un video?
¡ este curso está genial !
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 16
Preguntas 0
¿no se le puede dar like a un video?
¡ este curso está genial !
En el archivo styles.scss
/* Agrega estilos personalizados para la barra de desplazamiento */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
border-radius: 4px;
}
/* Agrega un efecto hover a la barra de desplazamiento */
::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
}
si quieren mover las listas pueden utilizar cdkDropListOrientation https://material.angular.io/cdk/drag-drop/overview#list-orientation.
Les comparto como va mi solución del reto hasta el momento.
Acepto retroalimentación
https://imgur.com/gallery/u520LTl
Así vamos … excelente curso.
Me está gustando mucho el curso
Para conectar Overlays a elementos dinámicos pueden hacer lo siguiente:
Declarar el trigger en .TS:
triggerOrigin: any;
Ese será la entrada de la propiedad ‘cdkConnectedOverlayOrigin’
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="triggerOrigin"
Luego crean un método Toggle:
toggle(trigger: any) {
this.triggerOrigin = trigger;
this.isOpen = !this.isOpen
}
Luego tomamos el Toggle como parámetro pasándolo al template:
<button class="btn btn-primary" cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="toggle(trigger)">Open overlay</button>
...
<div style="margin-top:100px">
<button *ngFor="let btn of btns" cdkOverlayOrigin #trigger="cdkOverlayOrigin"
(click)="toggle(trigger)">{{btn}}</button>
</div>
Y listo, ya tendrían su Overlay en elementos dinámicos.
Tenia problemas para agregar la directiva [cdkDropListConnectedTo] de forma dinamica, asi que lo solucione de la siguiente forma:
Ts:
Agregue una nueva propiedad a la interfaz
export interface Column {
id: string;
title: string;
todos: ToDo[];
}
y una vez agregado un id a cada columna agrege un getter para obtener la lista de los ids:
get columnsIds() {
return this.columns.map(column => column.id);
}
Y finalmente agregue cada id a cada elemento del dom y la directiva cdkDropListConnectedTo:
<div class="text-sm mt-2 min-h-[2.5rem]" cdkDropList
(cdkDropListDropped)="drop($event)" [cdkDropListData]="column.todos" [id]="column.id"
[cdkDropListConnectedTo]="columnsIds"
>
Para resolver el reto de Drag&Drop horizontal, se pueden apoyar de la siguiente documentación, realmente no es muy complicado. Saludos 😉
https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-horizontal-sorting
comparto un poco de mi avance 😃
Va quedando bien, lo que sigue es hacer las funcionalidades de Add card, rename list, delete list
Mi solución a los retos:
Para el scroll cree un component.scss:
/* Estilos para navegadores webkit */
/* Cambiar el color del pulgar y de la pista del scroll */
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.11);
border-radius: 10px;
}
::-webkit-scrollbar {
width: 8px;
background-color: gray;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.432);
border-radius: 10px;
}
Para el input:
En component.ts:
newTitle = new FormControl('');
isAddingCol = false;
addColumn(){
if (this.isAddingCol === false){
this.isAddingCol = true;
// para el focus del input, se le asigna una vez ya este en pantalla
setTimeout(() => {
document.getElementById('newTitle')?.focus();
}, 10);
}else{
this.columns.push({
title: this.newTitle.value!,
todos: [],
})
this.isAddingCol = false;
this.newTitle.setValue("");
}
}
Reto Cumplido!
En las respuestas les pasare el código …, si pueden mejorar algo, me gustaría que lo comentaran
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?