【Angular】ポップアップウィンドウの作り方

Webアプリを作るうえで、ほとんどの場合ポップアップウィンドウを作ります。
何かボタンを押下した際に警告文を出したり、フォームの入力内容を確認したりするために出すわけなのですが、今回はAngularでダイアログを作るための方法を紹介していきます。
この記事では、「MatDialogModule」を使って実装していきます。

スポンサーリンク

AngularMaterialを追加する

MatDialogModuleは「@angular/material/dialog」からインポートするわけなのですが、
私の場合「@angular/material」が入っていない状態からのスタートでしたので、それを入れるところからやりました。

ng add @angular/material

コントロールパネルからこのコマンドを実行すればよいです。
色々聞かれますが、基本的にデフォルト値のままEnter押していればよいです。

コンポーネントを新規作成

コンポーネントで定義した画面をウインドウとして表示していくことになるので、新規作成します。
やはりコントロールパネルから以下のコマンドを入力してください。

ng generate component window

最後のwindowはコンポーネント名なので、好きに設定してよいです。

MatDialogModuleをインポートする

app.module.tsにインポート文を追記します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatDialogModule} from '@angular/material/dialog';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { WindowComponent } from './window/window.component';
import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    WindowComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

黄色でマークした部分を追記してください。それ以外の部分は今回のポップアップウインドウの実装には関係ないです。

ポップアップ表示元の編集

表示元になる画面の編集に取り掛かっていきます。
まずHTMLファイルを見ていきます。

<p>home component</p>
<p>入力されたテキスト:{{dialogText}}</p>
<div>
  <input type="text" [(ngModel)]="inputText" />
<input type="button" value="open dialog" (click)="onClick();">
</div>

今回は、ボタンを用意しました。これを押下するとonClick()メソッドが実行されて、後述しますがこのメソッドによってダイアログが表示される仕組みです。
また、この上の行で入力フィールドを用意していますが、ここで入力した文字列をポップアップウインドウに渡すようにしています。
次にTSファイルの方を見ていきます。

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { WindowComponent } from './window/window.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-study';
  inputText:String;
  dialogText:String;

  constructor(
    private dialog:MatDialog
  ){
    this.inputText = "";
    this.dialogText = "";
  }

  onClick():void {
    this.dialog.open(
      WindowComponent,
      {data:this.inputText}).
    afterClosed().subscribe(result =>{
      this.dialogText = result;
    });
  }

}

まずコンストラクタでMatDialogのインスタンスを生成しています。
MatDialogとは、ウインドウを表示したり閉じたりしたりする機能が一通り用意されているクラスです。

次にonClick()メソッドについてですが、
まずこのように書きます。

this.dialog.open(呼び出すコンポーネント,ウインドウに渡す値)

先ほど用意したMatDialogにopenメソッドがあります。
これの第1引数にポップアップウインドウとして表示するコンポーネントを指定します。
第2引数にコンポーネントに引き渡す値を入力します。
なお、渡す値についてですが、例に書いているようにJSONのような形式にする必要があるので注意してください。

this.dialog.open( 呼び出すコンポーネント,ウインドウに渡す値 )
.afterClosed().subscribe(ウインドウを閉じた後の処理)

次にポップアップウインドウを閉じた後の処理を書いていきましょう。
.afterClosed().subscribe()の中に書いていきます。
サーバ=クライアント通信についての記事(こちら)でもsubscribeメソッドは使いましたが、それと同じ感じで使えます。
この引数に処理を書いていくのですが、

subscribe(result =>{
//通信後の処理を書いていく
})

このように書いていくことにより、ウインドウを閉じる際にウインドウから渡された値を処理に使うことが出来ます。
今回は、resultという変数に入れていますが、個々の変数名は好きに決めて良いです。

ポップアップウインドウの編集

次にポップアップウインドウとして使うコンポーネントの中身を編集していきます。
今回でいうとWindowComponentです。
まずHTMLファイルを見ていきます。

<div>
呼び出し元で入力した値:{{inputText}}<br>
    <input type="text" [(ngModel)]="dialogText" />
<input id="close_button" type="button" value="close" (click)="onClick()">
</div>

呼び出し元で入力した値を表示するようにしています。TSファイルの説明で紹介しますが、inputTextという変数に呼び出し元のopenメソッドの第2引数で渡したデータを入力しています。
後、こちらにもボタンを用意していますが、こちらはポップアップウインドウを閉じるためのものです。
次にTSファイルを見ていきます。

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

@Component({
  selector: 'app-window',
  templateUrl: './window.component.html',
  styleUrls: ['./window.component.css']
})
export class WindowComponent implements OnInit {
  inputText:String;
  dialogText:String;

  constructor(
    public dialogref: MatDialogRef<WindowComponent>,
    @Inject(MAT_DIALOG_DATA) data:string
  ) {
    this.inputText = data;
    this.dialogText = "";
  }

  ngOnInit(): void {
  }

  public onClick() {
    this.dialogref.close(this.dialogText);
  }

}

まずコンストラクタで「MatDialogRef」というクラスを呼んでいきます。こちらにウインドウを閉じるための機能とかがあります。
また、@Inject(MAT_DIALOG_DATA)というデコレータを付けて何か変数を作っているわけですが、このデコレータを付けることによって呼び出し元から渡された値がこの変数に入力されることになります。

つぎにonClick()メソッドについてですが、先ほどのMatDialogRefクラスのcloseメソッドを使ってウインドウを閉じるだけです。
このcloseメソッドですが、引数に何も入れずに実行することもできますが、ウインドウを閉じる際に呼び出し元に渡したい値がある場合は、引数として指定すればよいです。

実際の動作

では、実際に動かしてみます。

こちらで何か適当な文章を入力していきます。
そしてボタンを押下すると

ポップアップウインドウに呼び出し元で入力した文章が反映されていますね、データの受け渡しがうまくいっています。
次にウインドウでも文章を入力し、ボタンを押下します。

ウインドウが閉じ、ウインドウで入力した値が反映されています。こちらのデータの受け渡しもうまくいきました。

終わりに

今回はとてもシンプルに作りましたが、これを応用していくことで、
ウインドウのボタンを押下すると別の画面に遷移したり、「OK」「Cancel」ボタンがあって押下するボタンによって処理が変わるものなどの、よく見るポップアップも作れます。

スポンサーリンク

Angular開発

Posted by 社畜林檎