Modales recibiendo información

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

Alonso Jimenez Cucanan

student•

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

student•

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

student•

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

student•

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

student•

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

Max Andy Diaz Neyra

student•

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

Modales recibiendo información

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular