【Angular】ダイアログ画面をMat-dialogで実装する

Angularでダイアログ画面を実装する

Angularでモダンなダイアログ画面を実装したい場合がmat-dialogを使用するのが一般的です。

mat-dialogはAngularmaterialの提供している機能の一部なので、まずAngularmaterialをインストールする必要があります。そのあたりは以下の記事で解説しているのでまずそちらを参照してください。

参照記事:AngularによるWebアプリ開発②~Angular Material をインストールしてマテリアルデザインを実装する

Mat-dialogを実装する

AngularMaterialがインストールできたらダイアログ画面を実装していきます。

まずはそれ用のコンポーネントを作っておきます。

# コンポーネントを追加する
$ ng generate component ngdialogview-sample
$ ng generate component ngdialogpage-sample

ダイアログはダイアログにアクセスするページとビュー自体の2つが必要になります。ngdialogview-sampleの方がダイアログの表示設定を行うコンポーネントになります。

まずモジュールとルーティングをappに登録します。

[app.module.ts]

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
~~~~
~~~~
import { MatDialogModule } from "@angular/material/dialog"; // これを追加!
import { MatButtonModule } from "@angular/material/button"; // これを追加!
import { MatInputModule } from "@angular/material/input"; // これを追加!
import { FormsModule } from "@angular/forms"; // これを追加!
import { NgdialogviewSampleComponent } from './ngdialogview-sample/ngdialogview-sample.component'; // これを追加!
import { NgdialogpageSampleComponent } from "./ngdialogpage-sample/ngdialogpage-sample.component"; // これを追加!


declarations: [
    AppComponent,
    ~~~~
    NgdialogviewSampleComponent,
    NgdialogpageSampleComponent,
    ],

imports: [
    BrowserModule,
    AppRoutingModule,
    ~~~~
    MatDialogModule //これを追加!
    MatButtonModule, //これを追加!
    MatInputModule, //これを追加!
    FormsModule //これを追加!
    ],

entryComponents: [NgdialogviewSampleComponent],//←こいつを追記

他のコンポーネントと違ってmatdialogはapp.module.tsのentryComponents:にダイアログのビュー側のコンポーネントを追加する必要があります。

これがダイアログの味噌、これに気付かなくて無駄な時間を浪費していました。これがないとダイアログは機能するが正しく表示されずブラウザのコンソールに↓のようなエラーが表示されます。

ERROR Error: No component factory found for SampledialogComponent. Did you add it to @NgModule.entryComponents?

次はルーティングを追加します。

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
~~~~
import { NgdialogpageSampleComponent } from "./ngdialogpage-sample/ngdialogpage-sample.component"; // これを追加!
const routes: Routes = [
  ~~~~
  ~~~~
  { path: "dialog", component: NgdialogpageSampleComponent } //これを追加!
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

モジュールとルーティングの設定ができたら、次はコンポーネントの方に記述していきます。

<ngdialogpage-sample.component.ts>

import { Component, OnInit } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { NgdialogviewSampleComponent } from "../ngdialogview-sample/ngdialogview-sample.component"; // これを追加!

@Component({
  selector: "app-ngdialogpage-sample",
  templateUrl: "./ngdialogpage-sample.component.html",
  styleUrls: ["./ngdialogpage-sample.component.css"],
})
export class NgdialogpageSampleComponent implements OnInit {
  // アラートの押されたボタンの結果を格納する変数
  data: string;
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(NgdialogviewSampleComponent, {
      data: { title: "ダイアログ確認", message: "ダイアログが表示されます" },
      height: "300px",
      width: "500px",
      disableClose: false,
    });

    dialogRef.afterClosed().subscribe((result) => {
      console.log("The dialog was closed");
      this.data = result;
    });
  }

  ngOnInit() {}
}

<ngdialogpage-sample.component.html>

<h2 class="mat-h2">ダイアログの実装</h2>
<br /><br />
Angularでのダイアログ画面の実装はMatdialogで簡単に行うことが可能です。
ボタンをクリックするとダイアログが表示されます。
<br /><br />
<br /><br />
<div class="button-wrapper">
  <button mat-raised-button color="primary" (click)="openDialog()">
    ダイアログを開く
  </button>
</div>
<br /><br />
<br /><br />
<li *ngIf="data">
  あなたがダイアログで入力したのは <strong>{{data}}</strong>です。
</li>

<ngdialogview-sample.component.html>

<h3 mat-dialog-title>{{ data.title }}</h3>
<mat-dialog-content>
  {{ data.message }}
  <br />
  <p>元の画面に渡す文字列データを入力する</p>
  <mat-form-field>
    <mat-label>文字列を</mat-label>
    <input matInput [(ngModel)]="data.data">
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
  <table cellspacing="15">
    <tr>
      <td>
        <button mat-raised-button [mat-dialog-close]="data.data" cdkFocusInitial>Ok</button>
      </td>
      <td>
        <button mat-raised-button [mat-dialog-close]="cancel">キャンセル</button>
      </td>
    </tr>
  </table>
</mat-dialog-actions>

<ngdialogview-sample.component.ts>

import { Component, OnInit, Inject } from "@angular/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";

@Component({
  selector: "app-ngdialogview-sample",
  templateUrl: "./ngdialogview-sample.component.html",
  styleUrls: ["./ngdialogview-sample.component.css"],
})
export class NgdialogviewSampleComponent implements OnInit {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public matDialogRef: MatDialogRef<NgdialogviewSampleComponent>
  ) {}

  ngOnInit() {}
}

http://localhost:4200/dialogにアクセスすると以下のような画面になります。

そしてボタンをクリックするとダイアログが表示されます

元コードはgithubに置いてあるのでうまくいかない人はそちらをクローンして試してみてください。

https://github.com/beginerSE/Angular-Demo/tree/master/

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする