Modales y diálogos

Clase 15 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Diego Lozano

student•

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;

Giovanni Andres Alzate Agudelo

student•

ser de luz

Elcira Ibarra

student•

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.

Diego Inostroza

student•

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();
  }
}

Reinaldo Mendoza

student•

Angular 19

Diego Inostroza

student•

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 {
&#x20; constructor(private *dialogRef*: DialogRef){ }
&#x20; faClose = faClose;  faCheckToSlot = faCheckToSlot;  faBars = faBars;  faUser = faUser;  faTag = faTag;  faCheckSquare = faCheckSquare;  faClock = faClock;
&#x20; close(){    this.dialogRef.close();  }}

Klisman Steven Zapata González

student•

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

Sergio Castillo

student•

en mi proyecto parece que no existiera cdk/dialog, porque pasa?

Carlos Córdova

student•

Comparte tu código para visualizar el error 😁

Gustavo Alberto Bedoya

student•

Me pasó igual, tenia la version 13 de angular. La tuve que actualizar a la version 15 y funciono perfectamente

Dave Juanes

student•

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>

Reinaldo Mendoza

student•

Para seguir las reglas de accesibilidad se debe mantener el focus

Rosiris Romero Moreno

student•

Para que no se rompiera el botón del login, hice lo siguiente:

Cambié el nombre del get por botonStyle y añadí algunas propiedades para controlar además el color y la posición del texto

<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',
    };
  }
}

Reinaldo Mendoza

student•

Buenisimo

Oscar Bravo

student•

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

Reinaldo Mendoza

student•

Ese es el comportamiento esperado, no creo que sea una buena idea cambiarlo

Nicolás Pinilla

student•

No me funciona con angular 17

Adrian Lima

student•

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 {