Material control - Material Dialog

Material Dialog

MatDialog cung cấp dịch vụ mở các popup/ modal dialogs với thiết kế đồng bộ của material.

Một dialog được mở bởi method open cùng với một component để load các dữ liệu của component tạo thành dialog và có thể set các config cho dialog . open method sẽ trả về data dạng MatDialogRef:

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});

MatDialogRef cung cấp khả năng điều khiển dialog. Nó có thể sử dụng để đóng một dialog và nhận notification cả khi dialog đó đã đóng.

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});

dialogRef.close('Pizza!');

Các components tạo bởi MatDialog có thể đưa vào MatDialogRef và sử dụng nó để đóng các dialog mà nó chứa. Khi đang đóng, các kết quả có thể được cung cấp nếu cần.

Kết quả sẽ đẩy vào hàm afterClosed.

@Component({/* ... */})
export class YourDialog {
  constructor(public dialogRef: MatDialogRef<YourDialog>) { }

  closeDialog() {
    this.dialogRef.close('Pizza!');
  }
}

 Các global config default

Default dialog có thể được thiết lập bằng cách cung cấp đối tượng MatDialogConfig cho MAT_DIALOG_DEFAULT_OPTIONS trong application's root module.

@NgModule({
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ]
})

 Chia sẻ data với Dialog component

Nếu muốn chia sẻ dữ liệu với a dialog, Có thể sử dụng data option để truyền thông tin tới  dialog component.

let dialogRef = dialog.open(YourDialog, {
  data: { name: 'austin' },
});

Để kết nối vào data trong dialog component, cần có đăng ký token MAT_DIALOG_DATA 

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

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

 Dialog content

Một vài directives có sẵn để tạo cấu trúc dialog dễ dàng hơn:

Name	Description
mat-dialog-title	[Attr] Dialog title, applied to a heading element (e.g., <h1>, <h2>)
<mat-dialog-content>	Primary scrollable content of the dialog.
<mat-dialog-actions>	Container for action buttons at the bottom of the dialog. Button alignment can be controlled via the align attribute which can be set to end and center.
mat-dialog-close	[Attr] Added to a <button>, makes the button close the dialog with an optional result from the bound value.

For example:

<h2 mat-dialog-title>Delete all</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>

Khi dialog được mở, mặc định dialog sẽ tự động focus vào tabbable element đầu tiên.

Có thể config không focus vào element với tabindex attribute

<button mat-button tabindex="-1">Not Tabbable</button>

 Configuring dialog content via entryComponents

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

 Accessibility

Mặc định dialog có role="dialog" ở root element. role có thể thay đổi thành alertdialog qua MatDialogConfig khi đang mở.

Demo

Nguồn: https://material.angular.io/components/dialog/overview