Angular Material Drag and Drop、canvas に cdkDrag を動的に付与したい

Question

Angular Material の Drag and Drop の機能について質問です。

https://material.angular.io/cdk/drag-drop/overview

現状、以下のようにして cdkDrag をつけることで、画面内を要素が移動できる状態にあります。

<div>
    <canvas #canvas width="300" height="300" cdkDrag></canvas>
</div>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit{

  constructor(
  ) {}

  @ViewChild('canvas', { static: true })
  canvas: ElementRef<HTMLCanvasElement>;

ここの cdkDrag を動的につけて、ドラッグ可能、不可能を制御したいのですが、そのような方法をご存知の方がいらっしゃいましたらご教授お願いしたいです。

試した方法としては、*ngIf を用いて、条件に応じて切り替えようとしましたが、canvas がうまく表示されずにうまく行きませんでした。それに合わせて、ngOnInit を ngAfterViewinit にかえましたがうまく行きませんでした。

よろしくお願いします。

Answer 1

https://material.angular.io/cdk/drag-drop/api#CdkDrag

@Input('cdkDragDisabled')
disabled: boolean

というInputプロパティがあります。

<canvas #canvas width="300" height="300" cdkDrag [cdkDragDisabled]="bool"></canvas>

これで制御できるのではないでしょうか。

Comments

[t-cool]

ご助言、ありがとうございました！