No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Modales y diálogos

15/24
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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;
 
```ts 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 { constructor(private *dialogRef*: DialogRef){ } faClose = faClose; faCheckToSlot = faCheckToSlot; faBars = faBars; faUser = faUser; faTag = faTag; faCheckSquare = faCheckSquare; faClock = faClock; close(){ this.dialogRef.close(); }}
Si están usando Angular 17: ```ts 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(); } } ```

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.

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`
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
No me funciona con angular 17

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