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>
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();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.