Modales y diálogos
Clase 15 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Lozano
student•
hace 3 años
Giovanni Andres Alzate Agudelo
student•
hace 3 años
Clase 15 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Lozano
Giovanni Andres Alzate Agudelo
Elcira Ibarra
Diego Inostroza
Reinaldo Mendoza
Diego Inostroza
Klisman Steven Zapata González
Sergio Castillo
Carlos Córdova
Gustavo Alberto Bedoya
Dave Juanes
Reinaldo Mendoza
Rosiris Romero Moreno
Reinaldo Mendoza
Oscar Bravo
Reinaldo Mendoza
Nicolás Pinilla
Adrian Lima
import { faClose, faCheckToSlot, faBars, faUser, faTag, faCheckSquare, faClock } from '@fortawesome/free-solid-svg-icons';
faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock;
ser de luz
En esta clase, vimos cómo utilizar los diálogos, que también se conocen como modales, que es una forma de abrir una ventana con base a todo un componente, que tiene sus propios estilos y su propia lógica.
Si están usando Angular 17:
import { Component } from '@angular/core'; import {DialogRef} from '@angular/cdk/dialog'; import { faClose, faCheckToSlot, faBars, faUser, faTag, faCheckSquare, faClock } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { BtnComponent } from '../btn/btn.component'; @Component({ selector: 'app-task-dialog', standalone: true, imports: [FontAwesomeModule, BtnComponent], templateUrl: './task-dialog.component.html', styleUrl: './task-dialog.component.scss' }) export class TaskDialogComponent { constructor(private dialogRef: DialogRef){ } faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock; close(){ this.dialogRef.close(); } }
Angular 19
import { Component } from '@angular/core'; import {DialogRef} from '@angular/cdk/dialog'; import { faClose, faCheckToSlot, faBars, faUser, faTag, faCheckSquare, faClock } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { BtnComponent } from '../btn/btn.component'; @Component({ selector: 'app-task-dialog', standalone: true, imports: [FontAwesomeModule, BtnComponent], templateUrl: './task-dialog.component.html', styleUrl: './task-dialog.component.scss' }) export class TaskDialogComponent { constructor(private dialogRef: DialogRef){ } faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock; close(){ this.dialogRef.close(); } } ```import { Component } from '@angular/core';import {DialogRef} from '@angular/cdk/dialog';import { faClose, faCheckToSlot, faBars, faUser, faTag, faCheckSquare, faClock } from '@fortawesome/free-solid-svg-icons';import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';import { BtnComponent } from '../btn/btn.component'; @Component({ selector: 'app-task-dialog', standalone: true, imports: \[FontAwesomeModule, BtnComponent], templateUrl: './task-dialog.component.html', styleUrl: './task-dialog.component.scss'})export class TaskDialogComponent {   constructor(private *dialogRef*: DialogRef){ }   faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock;   close(){ this.dialogRef.close(); }}
La librería de '@fortawesome/free-solid-svg-icons' cambió los nombres de algunos íconos entonces faClose y faCheckToSlot ya no existen.
Yo los reemplacé así: faClose por faTimes y faCheckToSlot por faCheck
en mi proyecto parece que no existiera cdk/dialog, porque pasa?
Comparte tu código para visualizar el error 😁
Me pasó igual, tenia la version 13 de angular. La tuve que actualizar a la version 15 y funciono perfectamente
Ok, si alguien al igual que yo esta aplicando todo esto en Angular 19+ les dejo mis sugerencias:
Primero las injecciones ya no son via el constructor se utiliza esta importación y declaración:
import { Component, inject } from '@angular/core'; export class TodoDialogComponent { dialogRef = inject(DialogRef); }
En las versiones 19+ ya podemos usar sentencion mas comodas para loops:
@for (column of columns; track $index) { \<div class="rounded bg-gray-200 w-72 p-2 mr-3 shrink-0"> \<div class="flex justify-between py-1"> \<h3 class="text-sm font-bold ml-2">{{ column.title }}\</h4> \</div> \<div class="text-sm mt-2 min-h-\[0.2rem]" cdkDropList (cdkDropListDropped)="drop($event)" \[cdkDropListData]="column.todos" > @for (todo of column.todos; track $index) { \<div cdkDrag class="bg-white shadow p-2 rounded mt-2 border-b border-x-gray-300 cursor-pointer hover:bg-gray-400" (click)="openDialog()" > {{ todo.title }} \</div> } \</div> \</div> } \<button class="shrink-0" (click)="addColumn()">Add New Column\</button>
Para seguir las reglas de accesibilidad se debe mantener el focus
Para que no se rompiera el botón del login, hice lo siguiente:
<code> export class BtnComponent { @Input() btnType: 'button' | 'submit' | 'reset' = 'button'; @Input() btnTextPosition: 'text-left' | 'text-right' | 'text-center' = 'text-center'; @Input() color: string = 'primary'; get botonStyle() { return { 'text-black': this.color.includes('light'), 'text-white': !this.color.includes('light'), 'text-left': this.btnTextPosition === 'text-left', 'text-right': this.btnTextPosition === 'text-right', 'text-center': this.btnTextPosition === 'text-center', 'bg-success hover:bg-green-800 focus:ring-green-300': this.color === 'success', 'bg-primary hover:bg-primary-800 focus:ring-primary-300': this.color === 'primary', 'bg-red-600 hover:bg-red-800 focus:ring-red-300': this.color === 'red', 'bg-sky-600 hover:bg-sky-800 focus:ring-sky-300': this.color === 'sky', 'bg-gray-200 hover:bg-gray-500 focus:ring-gray-50': this.color === 'gray-light', }; } }
Buenisimo
Excelentes herramientas las del CDk. Gracias Nicolás.
Tengo un pregunta. Cómo hago para que el modal no se cierre cuando hago click por fuera de él. Que tal que el usuario halla diligencioado mucha información y la pierda por un click involutario por fuera del modal
Ese es el comportamiento esperado, no creo que sea una buena idea cambiarlo
No me funciona con angular 17
No te olvides de importar el DialogModule en el imports del BoardComponent:@Component({ selector: 'app-board', standalone: true, imports: [CommonModule, NavbarComponent, DragDropModule, DialogModule], templateUrl: './board.component.html', styles: [ */\* Animate items as they're being sorted. \*/* .*cdk-drop-list-dragging* .*cdk-drag* { transition: transform 250*ms* cubic-bezier(0, 0, 0.2, 1); } */\* Animate an item that has been dropped. \*/* .*cdk-drag-animating* { transition: transform 300*ms* cubic-bezier(0, 0, 0.2, 1); } ]})export class BoardComponent {
@Component({ selector: 'app-board', standalone: true, imports: [CommonModule, NavbarComponent, DragDropModule, DialogModule], templateUrl: './board.component.html', styles: [ ` /* Animate items as they're being sorted. */ .cdk-drop-list-dragging .cdk-drag { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } /* Animate an item that has been dropped. */ .cdk-drag-animating { transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); } ` ] }) export class BoardComponent {