みなさんこんにちは、現役エンジニアのサメハックです
未経験から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ボックスを表示したい場合はこちらの記事を参考にしてね!
ブラウザデフォルトの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フォローしてもらえると嬉しいです🦈