Ecco una raccolta di esempi di componenti Angular da integrare nella propria applicazione web.

La maggior parte degli esempi che troverai in questo articolo rappresentano una forma personalizzata dei componenti base della libreria Angular Material.

Puoi trovare un esempio completo di applicazione Angular qui

 

Finestra di dialogo per conferma

Questa finestra di dialogo consente ad un utente di confermare un’azione richiesta utilizzando i pulsanti. La definizione della finestra è personalizzabile nei campi titolo, descrizione e testo dei pulsanti (conferma e annulla).

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  title?: string,
  description?: string,
  confirm?: string,
  cancel?: string
}

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent {

  title: string;
  description: string | undefined;
  confirm: string;
  cancel: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {
    if (!data) {
      data = {};
    }
    this.title = data.title || 'Confirm action';
    this.description = data.description;
    this.confirm = data.confirm || 'Ok';
    this.cancel = data.cancel || 'Cancel';
  }

}
<h2 mat-dialog-title>{{ title }}</h2>

<mat-dialog-content>
    {{ description }}
</mat-dialog-content>

<mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="false" cdkFocusInitial>{{ cancel }}</button>
    <button mat-button [mat-dialog-close]="true">{{ confirm }}</button>
</mat-dialog-actions>

Generazione componente

ng g c confirm-dialog

Moduli richiesti

Sono richiesti i moduli Angular Material: MatDialogModule e MatButtonModule.

 

Recommended Posts

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *