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
Si ya tienes una cuenta,
Estilos en Tablas
20/24Recursos
Aportes 1
Preguntas 1
Ordenar por:
```js
columnConfig: ColumnConfig[] = [
{ name: '#No', header: 'Id.', field: 'id', type: 'text' },
{ name: 'Name', header: 'Title', field: 'title', type: 'text' },
{ name: 'price', header: 'Price', field: 'price', type: 'text', showTotal: true },
{ name: 'cover', header: 'Cover', field: 'images', type: 'image' },
{ name: 'actions', header: 'Actions', field: '', type: 'action' }
];
```
```js
@for (column of columnConfig; track column.name) {
<ng-container [cdkColumnDef]="column.name">
{{ column.header }}
@if (column.type === 'image') {
![]()
} @else if (column.type === 'action') {
<app-btn (click)="update(row)">Update</app-btn>
} @else {
{{ row[column.field] }}
}
@if (column.showTotal) {
{{ total }}
}
</ng-container>
}
```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?