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
Contenido del curso
Modales recibiendo información
Alonso Jimenez Cucanan
Estudiante
Brenda Sutara
Estudiante
WILDES JARAMILLO HENAO
Estudiante
Darwin Rodríguez
EstudianteDarwin Rodríguez
Estudiante
Max Andy Diaz Neyra
EstudianteMuy 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, }); } }