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

ANGULAR

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

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

Angularの解説シリーズです。

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

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

この記事を読むと・・・
  • AngularMaterialを使って確認ダイアログが作成できる

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

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

作りたいもの

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フォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました