Angular Material Dialog（10分で簡単な作成）

ダイアログの簡単な作成法

一番簡単そうなダイアログの作成を紹介します。
私の好きな生き物として、
いぬ、ねこ、とりの中から、ねこにダッシュを入れ、
ダイアログに表示します。
始めに、cmaterial.module.tsファイルに、
マテリアルモジュールをインポートします。

dialog1

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

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

次はdailog.component.*を作成します。
dialogデイレクトリに、
dailog.component.ts
dailog.component.html
dailog.component.css
dailog.component.spec.ts
を作成するため、下記コマンドを入力します。

  
  >ng g c dialog --module app

さらに、dialogデイレクトリに、
VS Codeエデイタ―の新規ファイル作成で、
dialogdata.tsファイルを作成します。
下記の様にコードを記入します。
interfaceで DialogDataの型を定義し、
exportで、外部で使えるようにしておきます。
データ定義では、animalとして、
'いぬ' | 'ねこ' | 'とり'にします。


  
  export interface DialogData {
    animal: 'いぬ' | 'ねこ' | 'とり';
  }

次はapp.component.tsファイルを変更します。
斜め太字が追加・変更コードです。
コンストラクタでdialogをpublicにMatDialogで型を定義し、
app.component.tsが起動したとき、使用できるようにしています。
openDialog() メソッドは
app.component.htmlで使用します。
mat-buttonのクリックイベントで動作して、
ダイアログを表示します。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'exe-app';
  
//追加コード
  constructor(public dialog: MatDialog) {}

//追加コード
  openDialog() {
    this.dialog.open(DialogComponent, {
      data: {
        animal: 'ねこ'
      }
    });
  }  
}

app.component.htmlファイルのコードは、
下記の様にごくシンプルです。


  
  <button mat-button (click)="openDialog()">Open dialog</button>

dialog.component.tsは新しいファイルなので、
コードはすべて新規に記入します。
Inject、MAT_DIALOG_DATA、DialogDataの
インポートは目新しいですが、
DialogDataはdialogdata.tsのinterfaceで定義した型です。
Injectは、コンストラクタでの、
依存パラメータのデコレータで、
カスタム依存性を提供します。
ここでは、MAT_DIALOG_DATAにInjectが使われています。
MAT_DIALOG_DATAは、
ダイアログコンポーネントのデータにアクセスします。
dataはpublicで、型はDialogDataです。


  
import { Component } from '@angular/core';

import { Inject } from '@angular/core';
import { MAT_DIALOG_DATA} from '@angular/material/dialog';
import { DialogData } from './dialogdata';

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

  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

最後は、dialog.component.htmlファイルです。
dialog.component.cssファイル、app.component.cssファイルは、
今回は空になります。
mat-dialog-title、mat-dialog-contentタグは、
cmaterial.module.tsでインポートした、
MatDialogModuleで使えるようになります。
"data.animal === 'ねこ'"は、
app.component.tsの、openDialog()メソッドで入力。
*ngIf="data.animal === 'ねこ'"は、
もし"data.animal === 'ねこ'が真ならば、
&#10003;を表示するという意味になります。
&#10003はuniコードグループ絵文字で、
ダッシュの表示になります。

  
 <h1 mat-dialog-title>好きな生き物</h1>
<div mat-dialog-content>
  私の好きな生き物は　:
  <ul>
    <li>
      <span *ngIf="data.animal === 'いぬ'">&#10003;</span> いぬ
    </li>
    <li>
      <span *ngIf="data.animal === 'ねこ'">&#10003;</span> ねこ
    </li>
    <li>
      <span *ngIf="data.animal === 'とり'">&#10003;</span> とり
    </li>
  </ul>
</div>

簡単でしたね。
今回は以上になります。