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?
0:00/13:04
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?
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?
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,
});
}
}
Alonso Jimenez Cucanan
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?
Brenda Sutara
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
WILDES JARAMILLO HENAO
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?
Darwin Rodríguez
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; }
Darwin Rodríguez
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, }); } }
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 } });