系统对话框 Angular Material

Question

I work for system of dialog (Angular Material).

I create dialog-service for controll and container dialog. Dialog-service has methods for open/show different dialoges.

And I create dialog-component for contain data for dialog (it is single component of dialog). It is universal component.

I add StackBlitz

I have problem with closing dialoges after callback. How I can close dialog after callback? I try using [mat-dialog-close] - but I was not able to somehow parameterize - enable and disable the [mat-dialog-close] of different buttons.

And a have little problem. How I can add dynamicly mat-button to button element?

(I add class 'mat-button', but this don't full imitation mat-button)

 <div *ngIf="getButtons().length > 0 || getCloseButton()" mat-dialog-actions>
    <ng-container *ngFor="let button of getButtons()">
      <button [attr.class]="button.class"
        (click)="button.callback(button.callbackItem || dialogForm)">{{button.title}}</button>
    </ng-container>
</div>

Answer 1

In your dialog.html you must have something like this:

<button mat-stroked-button (click)="closeDialog()">Close</button>

and in your dialog.ts:

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

@Component({
  selector: 'dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<DialogComponent>) { }

  ngOnInit() {
  }

  closeDialog() {
    this.dialogRef.close();
  }

}