【Angular Material】確認ダイアログを作ろう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はAngular Materialで確認ダイアログを作る方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

AngularMaterialを使って確認ダイアログが作成できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

作りたいもの
Angular Materialで確認ダイアログを作ろう！
1. Angular Materialで確認ダイアログを作る構文
  1. ダイアログ
  2. 親コンポーネント※呼び出し側
実際に作ってみよう！
GitHubのサンプルコード

作りたいもの

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

Angular Materialで確認ダイアログを作ろう！

Angular Materialで確認ダイアログを作る構文

ダイアログ

<button [mat-dialog-close]="親コンポーネントに返すデータ">OK</button>
<button (click)="cancel()" cdkFocusInitial>キャンセル</button>

cdkFocusInitialをつけるとデフォルトでフォーカスを当てることができるよ！

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

constructor(
  public dialogRef: MatDialogRef<ダイアログコンポーネント名>,
  @Inject(MAT_DIALOG_DATA) public data: any
) {}

ダイアログコンポーネント名は自分自身のコンポーネント名になるよ！

親コンポーネント※呼び出し側

openDialog() {
  const dialogRef = this.dialog.open(ダイアログコンポーネント名, {data: {渡したいデータ}});

  // ダイアログクローズを検知
  dialogRef.afterClosed().subscribe((ダイアログから受け取るデータ) => {});
}

ちょっとわかりにくいので、次項の実際のコードを見てみてね！

実際に作ってみよう！

初期設定

ng new my-app
cd my-app
ng generate component my-dialog
ng serve -o

Angular Materialのインストール

ng add @angular/material

テーマカラーとアニメーションは好きな項目を選択してね！

app.component.html

<button (click)="openDialog()">確認ダイアログオープン</button>

app.component.ts

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    // ダイアログを開く※引数を渡すことも可
    const dialogRef = this.dialog.open(MyDialogComponent, {
      data: { text: 'データを更新' },
    });

    // ダイアログが閉じたら受け取る
    dialogRef.afterClosed().subscribe((result) => {
      console.log('ダイアログが閉じられました', result);
      if (result) {
        console.log('OKが押されました');
      } else {
        // resultはundefined
        console.log('キャンセルが押されました');
      }
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyDialogComponent } from './my-dialog/my-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent, MyDialogComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatFormFieldModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

my-dialog.comopnent.html

<p>{{ data.text }}してよいですか？</p>
<div>
  <!-- [mat-dialog-close]に渡した値を呼び出し元に返す -->
  <button [mat-dialog-close]="response">OK</button>
  <button (click)="cancel()" cdkFocusInitial>キャンセル</button>
</div>

my-dialog.comopnent.ts

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

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.scss'],
})
export class MyDialogComponent {
  // データ返却用
  response = true;

  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  // キャンセルボタン
  cancel(): void {
    this.dialogRef.close();
  }
}

これで確認ダイアログが作成できたよ！
ブラウザデフォルトのYES/NOボックスを表示したい場合はこちらの記事を参考にしてね！

【JavaScript＆HTML】YES/NOボックスをつくろう！【コピペでOK】

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
使いたい人は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-material-confirm-dialog

Contribute to same-hack/Angular-material-confirm-dialog development by creating an account on GitHub.

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram