もう迷わない！Angularで確認ダイアログの基礎知識と実践ガイド

2024-04-27

Angular で確認ダイアログを簡単に作成する方法

MatDialog は、Angular Material に含まれる、ダイアログを作成するためのコンポーネントです。確認ダイアログを作成するには、以下の手順を行います。

MatDialog をインポートします。

import { MatDialog } from '@angular/material/dialog';

確認ダイアログコンポーネントを作成します。

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

  constructor(private dialogRef: MatDialog) {}

  closeDialog(confirmed: boolean) {
    this.dialogRef.close(confirmed);
  }
}

確認ダイアログを開きます。

openConfirmationDialog(message: string): Observable<boolean> {
  return this.dialog.open(ConfirmationDialogComponent, {
    data: { message: message }
  }).afterClosed();
}

<div mat-dialog-content>
  <p>{{ data.message }}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="closeDialog(false)">キャンセル</button>
  <button mat-button (click)="closeDialog(true)">確認</button>
</div>

ngBootstrap は、Angular 用の Bootstrap コンポーネントライブラリです。確認ダイアログを作成するには、以下の手順を行います。

ngBootstrap をインストールします。

npm install ng-bootstrap

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

  constructor(private modalService: NgbModal) {}

  closeDialog(confirmed: boolean) {
    this.modalService.dismissAll();
  }
}

openConfirmationDialog(message: string): Observable<boolean> {
  const modalRef = this.modalService.open(ConfirmationDialogComponent);
  modalRef.componentInstance.message = message;
  return modalRef.result;
}

<div class="modal-header">
  <h4 class="modal-title">確認</h4>
  <button type="button" class="close" aria-label="Close" (click)="closeDialog(false)">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>{{ message }}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="closeDialog(false)">キャンセル</button>
  <button type="button" class="btn btn-primary" (click)="closeDialog(true)">確認</button>
</div>

MatDialog と ngBootstrap は、Angular で確認ダイアログを簡単に作成するための 2 つの方法です。どちらの方法を使用するかは、個々のニーズによって異なります。

MatDialog は、Angular Material の他のコンポーネントとシームレスに統合されるという利点があります。一方、ngBootstrap は、Bootstrap コンポーネントを使用しているプロジェクトに適しています。

どちらの方法を選択する場合でも、確認ダイアログのアクセシビリティを確保するために、適切な ARIA 属性を使用することが重要です。

app.component.html

<button mat-button (click)="openConfirmationDialog()">確認ダイアログを開く</button>

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

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

  constructor(private dialog: MatDialog) {}

  openConfirmationDialog(): void {
    this.dialog.open(ConfirmationDialogComponent, {
      data: { message: 'この操作を実行しますか？' }
    }).afterClosed().subscribe(result => {
      if (result) {
        console.log('ユーザーは操作を確定しました。');
      } else {
        console.log('ユーザーは操作をキャンセルしました。');
      }
    });
  }
}

confirmation-dialog.component.html

<div mat-dialog-content>
  <p>{{ data.message }}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="closeDialog(false)">キャンセル</button>
  <button mat-button (click)="closeDialog(true)">確認</button>
</div>

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

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

  constructor(private dialogRef: MatDialogRef<ConfirmationDialogComponent>) {}

  closeDialog(confirmed: boolean) {
    this.dialogRef.close(confirmed);
  }
}

mat-dialog-content {
  padding: 20px;
}

mat-dialog-actions {
  display: flex;
  justify-content: flex-end;
}

このコードを実行すると、ボタンをクリックすると確認ダイアログが表示されます。ユーザーが「確認」ボタンをクリックすると、コンソールに「ユーザーは操作を確定しました。」と出力されます。ユーザーが「キャンセル」ボタンをクリックすると、コンソールに「ユーザーは操作をキャンセルしました。」と出力されます。

このコードは、基本的な確認ダイアログを作成するための出発点として使用できます。必要に応じて、ダイアログにアイコンを追加したり、メッセージをカスタマイズしたり、その他の操作を実行したりできます。

Angular で確認ダイアログを作成するその他の方法

独自のコンポーネントを作成する: これは、完全な制御が必要な場合や、複雑なダイアログを作成する必要がある場合に適しています。
Angular CDK オーバーレイを使用する: これは、より低レベルな方法でダイアログを作成したい場合に適しています。
サードパーティライブラリを使用する: primeng や ngx-bootstrap などのライブラリには、確認ダイアログコンポーネントが含まれている場合があります。

以下に、それぞれの方法の簡単な概要を示します。

独自のコンポーネントを作成するには、以下の手順を行います。