Modales recibiendo información
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Modales recibiendo información
Modales recibiendo información
Contenido del curso
Alonso Jimenez Cucanan
Brenda Sutara
WILDES JARAMILLO HENAO
Darwin Rodríguez
Darwin Rodríguez
Max Andy Diaz Neyra
Muy buena clase, pero en el caso de dar click afuera del modal, este tambien se cierra. Existira manera de hacer un warning cuando esto suceda, y oblige a escoger entre si y no obligatoriamente?
Lo más intuitivo para el usuario es hacer click afuera, trello tiene las dos cosas, el botón de cerrar y cerrarlo dando click afuera
Nico, cuando tengo abierto el modal y doy click por fuera y se cierra, este me retorna undefined, yo manejo esa respuesta con un condicional, pero cuál debería ser el uso apropiado?
En el componente del dialog puedes decirle mediante tu dialogRef que no se cierre
constructor( private dialogRef: DialogRef<OutputData>, @Inject(DIALOG_DATA) data: InputData ) { dialogRef.disableClose = true; this.todo = data.todo; }
Otra forma es pasarle el parámetro de configuración
const dialogRef = this.dialog.open(TodoDialogComponent, { minWidth: '300px', maxWidth: '50%', autoFocus: false, disableClose: true, data: { todo } });
Hola a todos, les dejo mi implementacion utilizando Angular 19:
import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; import { Component, inject, signal } from '@angular/core'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faBars, faCheckSquare, faCheckToSlot, faClock, faClose, faTag, faUser, } from '@fortawesome/free-solid-svg-icons'; import { BtnComponent } from '../btn/btn.component'; import { Todo } from '../../models/todo.model'; interface InputData { todo: Todo; } interface OutputData { rta: boolean; } @Component({ selector: 'app-todo-dialog', imports: [FontAwesomeModule, BtnComponent], templateUrl: './todo-dialog.component.html', }) export class TodoDialogComponent { // constructor( // private dialogRef: DialogRef<Data>, // @Inject(DIALOG_DATA) data: Data; // ) { // this.todo = data.todo // } private dialogRefService = inject(DialogRef<OutputData>); private data = inject<InputData>(DIALOG_DATA); todo = signal<Todo>(this.data.todo); faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock; closeDialog() { this.dialogRefService.close(); } closeWithRta(rta: boolean) { this.dialogRefService.close({ rta, }); } }