Angular Material Dialog From Menu（15分で作成）

メニューからダイアログの表示法

Angular Material のメニューから、
ダイアログに入るプログラムは、
正直少し難しいです。
しかし、コツを覚えるとマスターできます。

変更するファイルは、
cmaterial.module.ts
app.component.ts
app.component.html
dialog.component.htmlです。

dialogdata.ts
dialog.component.ts
は変更しません。
*.component.cssのファイルは空になります。

cmaterial.module.tsでは、
MatDialogModuleのほかに、
MatButtonModuleとMatMenuModuleをインポートします。

  
 import { NgModule } from "@angular/core";
//追加コード
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';  

//変更コード
@NgModule({
imports:[MatButtonModule,
              MatDialogModule,
              MatMenuModule ],
exports:[ MatButtonModule,
              MatDialogModule,
              MatMenuModule ]
})
export class CmaterialModule{} 
  
 

次はapp.component.tsファイルです。
ViewChild、MatDialog、MatMenuTriggerをインポートします。
menuの表示は、
@ViewChildプロパティデコレータを使用し、
プログラムで開きます。
マットメニューを開くには、
DOMのトリガーエレメントにメニューをアタッチするための、
matMenuTriggerForデイレクテイブが必要になります。

mat-menuエレメント（要素）は、
それ自体では何も表示せず、
matMenuTriggerForがあって、
始めて開くようになります。

下記コードは斜め太字が追加コードになります。

  
import {Component} from '@angular/core';
import { DialogComponent } from './dialog/dialog.component';
//追加コード
import {ViewChild} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import {MatMenuTrigger} from '@angular/material/menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'exe-app';
  @ViewChild('menuTrigger1') menuTrigger: MatMenuTrigger;

  constructor(public dialog: MatDialog) {}
  
  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {restoreFocus: false});
    dialogRef.afterClosed().subscribe(() => this.menuTrigger.focus());
  }    
}  
  
 

app.component.htmlの、
#menuTrigger1は、app.component.tsでの
@ViewChild('menuTrigger1') に対応しています。

[matMenuTriggerFor]="menu"のmenuは、
<mat-menu #menu="の#menu　にながっています。

Open dialogのclickイベントが発生すると、
openDialog()メソッドが働き、
ダイアログを表示します。

  
 <button mat-button [matMenuTriggerFor]="menu" #menuTrigger1>Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="openDialog()">Open dialog</button>
</mat-menu> 
  
 

dialog.component.htmlでは、
ダイアログを表示しますが、
ダイアログをクローズするには、
menuアイテムなどの、
マットダイアログコンフィギューとして、
手動でrestoreFocusをfalseにし、
openメソッドに渡す必要があります。

表示されたダイアログで、
Okayをクリックすると、
mat-dialog-closeが働き、
app.component.tsの、
dialogRef.afterClosed().subscribe(() => this.menuTrigger.focus());
により、始めのメニューに戻ります。

  
 <mat-dialog-content>
  This is a dialog
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>Okay</button>
</mat-dialog-actions> 
  
 

今回は以上です。