スポンサーリンク

mat-dialogをドラッグさせる[Angular Material]

mat-dialogをドラッグさせる

Angular Materialのダイアログをドラッグさせるようにしていきます。
以下を参考に、ダイアログのドラッグ機能を追加します。
https://material.angular.io/cdk/drag-drop/overview

また、DragDropModuleを使うのでインポートする必要があります。

import {DragDropModule} from '@angular/cdk/drag-drop';

ソースコード

HTML

mat-dialog-titleの部分にドラッグ機能を追加しています。

<h1 mat-dialog-title
    cdkDrag
    cdkDragRootElement=".cdk-overlay-pane"
    cdkDragHandle
    cdkDragBoundary=".cdk-overlay-container"
>
    ヘッダータイトル
</h1>
<div mat-dialog-content>コンテンツ</div>
セレクター説明
cdkDragドラッグできる要素にする
cdkDragRootElementドラッグさせるルート要素を指定。
.cdk-overlay-paneがダイアログの部分のクラスとして使われているので、ダイアログをドラッグできるようになる
cdkDragHandleこの要素をドラッグできるハンドルとする。
cdkDragBoundaryドラッグ可能範囲を指定。
.cdk-overlay-containerが、ダイアログの後ろの背景のクラスとして使われてるので、それを指定。

CSS

::ng-deep .dialog-style .mat-dialog-title {
    background-color: greenyellow !important;
    cursor: move;
}

::ng-deep .dialog-style .mat-dialog-container {
    padding: 0px;
}

::ng-deep .dialog-style .mat-dialog-content {
    margin: 0px;
    padding: 0px 24px 24px 24px;
}

TypeScript

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

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

export class AppComponent {

    constructor(private dialog:MatDialog){}

    openDialog(){
      this.dialog.open(
        DialogComponent, {
          height: '200px',
          width: '400px',
          panelClass: 'dialog-style'
        }
      )
    }
}

実行結果

以下の、ヘッダータイトルの緑色の部分でダイアログをドラッグできる

ドラッグ後

スポンサーリンク