【Angular Material】入力ダイアログを作ろう！

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

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

Angularの解説シリーズです。

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

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

この記事を読むと・・・

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

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

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

作りたいもの
1. 実行環境
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: { title: 'あなたの名前' },
    });

    // ダイアログが閉じたら受け取る
    dialogRef.afterClosed().subscribe((response) => {
      console.log('ダイアログが閉じられました');
      if (response) {
        console.log('OKが押されました 名前', response);
      } 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,
    FormsModule,
    MatDialogModule,
    MatFormFieldModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

my-dialog.comopnent.html

<p>{{ data.title }}を入力してください</p>
<div>
  <!-- [mat-dialog-close]に渡した値を呼び出し元に返す -->
  <input type="text" [(ngModel)]="myText" />
  <button [mat-dialog-close]="myText">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 {
  // データ返却用
  myText: string;

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

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

これで入力内容を親コンポーネントへ返す入力ダイアログが作成できたよ！

GitHubのサンプルコード

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

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

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

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

twitter
instagram