[Bug] Can't use disableDrag, disableResize props in Angular

[nguyenthanhtien]

Can't use disableDrag, disableResize props in Angular

I'm using gridstack in Angular. But when i try set disableDrag, disableResize props is true in NgGridStackOptions, gridstack html still can allow drag & resize.

Your environment

"gridstack": "^10.1.2",
Windows 10,
Node: v18.16.0

Code

home.component.html

<div>
  <div class="flex justify-content-between align-items-center flex-grow-1">
    <div class="view-actions flex flex-wrap align-items-center gap-2 ml-auto">
      <p-button
        styleClass="p-button p-button-icon-only p-button-text button-download justify-content-center p-0"
        (onClick)="onCancel()">
        <fa-icon [icon]="faCancel"></fa-icon>
        <span class="p-button-title">Cancel</span>
      </p-button>
      <p-button
        styleClass="p-button p-button-icon-only p-button-text button-download justify-content-center p-0"
        (onClick)="onDisable()">
        <fa-icon [icon]="faSave"></fa-icon>
        <span class="p-button-title">Only View</span>
      </p-button>
      <p-dropdown
        optionLabel="name"
        pSize="sm"
        placeholder="View"
        emptyMessage=" "
        [selectId]="selectedView"
        [options]="views">
      </p-dropdown>
      <p-button
        (onClick)="add()"
        type="submit"
        label="ADD WIDGET"
        styleClass="p-button-md" />
    </div>
  </div>
  <gridstack
    class="grid-stack"
    (changeCB)="onChange($event)"
    (resizeStopCB)="onResizeStop($event)"
    [options]="gridOptions">
    <gridstack-item
      class="grid-stack-item-content"
      *ngFor="let n of widgets"
      [options]="n">
      <span class="text-primary-500 font-medium capitalize widget-title">{{ findTitle(n.id) }}</span>
      <input
        type="text"
        field="code"
        pInputText
        class="p-inputtext-sm w-20rem" (change)="onUpdateTitle(n.id, $event)"/>
      <ng-container *ngComponentOutlet="findComponent(n.id)"></ng-container>
    </gridstack-item>
  </gridstack>
</div>
<div>
  <app-add-widget
    [visible]="visibleAddWidget"
    (addWidget)="addWidget($event)"></app-add-widget>
</div>

import { Component, Input } from '@angular/core';
import { faCancel, faSave } from '@fortawesome/free-solid-svg-icons';
import { GridStack, GridStackWidget } from 'gridstack';
import { elementCB, NgGridStackOptions, NgGridStackWidget, nodesCB } from 'gridstack/dist/angular';

import { ComponentType } from '../../constants/macro.constant';
import { EconomicSummaryComponent } from '../economic-summary/economic-summary.component';
import { IssuerRatingComponent } from '../issuer-rating/issuer-rating.component';
import { ReportMacroComponent } from '../report-macro/report-macro.component';

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

  @Input() public pageName: string;
  @Input() public isMyView: boolean = false;
  @Input() public isViewMode: boolean = false;

  grid: GridStack;
  faSave = faSave;
  faCancel = faCancel;
  selectedView: string;
  views = [
    { id: 'default', name: 'Default View' },
    { id: 'custom', name: 'Custom View' }];

  index = 0;
  public components = [];
  public widgets: NgGridStackWidget[] = [
  ];

  public gridOptions: NgGridStackOptions = {
    column: 12,
    cellHeight: 10,
    acceptWidgets: true,
    disableDrag: this.isEditMode,
    disableResize: this.isEditMode,
    children: this.widgets
  };

  visibleAddWidget: boolean = false;

  constructor() {
  }

  ngOnInit(): void {
  }

  public onChange(data: nodesCB) {
    console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
    console.log('all nodes ', data.nodes);
  }

  public onResizeStop(data: elementCB) {
    console.log('resizestop ', data.el.gridstackNode);
  }

  public identify(index: number, w: GridStackWidget) {
    return w.id; // or use index if no id is set and you only modify at the end...
  }

  public add() {
    this.visibleAddWidget = true;
  }

  public findComponent(id: string): ComponentType {
    return this.components.find(c => c.id === id).component;
  }

  public findTitle(id: string): string {
    return this.components.find(c => c.id === id).title;
  }

  onCancel() {
    this.visibleAddWidget = false;
  }

  onDisable() {
    this.isViewMode= true;
    this.gridOptions.disableDrag = true;
    this.gridOptions.disableResize = true;
  }

  addWidget(widget) {
    switch (widget.type) {
      case 'ECONOMIC_SUMMARY':
        this.components.push({ id: this.index.toString(), component: EconomicSummaryComponent, title: widget.title });
        this.widgets.push({ x: this.index, h: 60, w: 6, id: this.index.toString(), selector: 'EconomicSummaryComponent' });
        break;
      case 'ISSUER_RATING':
        this.components.push({ id: this.index.toString(), component: IssuerRatingComponent, title: widget.title });
        this.widgets.push({ x: this.index, h: 20, w: 6, id: this.index.toString(), selector: 'IssuerRatingComponent' });
        break;
      case 'REPORT_LIST':
        this.components.push({ id: this.index.toString(), component: ReportMacroComponent, title: widget.title });
        this.widgets.push({ x: this.index, h: 60, w: 6, id: this.index.toString(), selector: 'ReportMacroComponent' });
        break;
      case 'CUSTOM_CHART':
      case 'REPORT_TO_DEST':
      case 'EXPORT_BY_ITEMS':
        break;
      default:
        break;
    }
    this.visibleAddWidget = false;
    this.index++;
    console.log(this.components);
  }

  onUpdateTitle(id, $event: Event) {
    // console.log('update title ', id, $event);
  }

}

Expected behavior

After set disableDrag, disableResize props is true, gridstack don't allow resize and drag.

[adumesny]

can you please simplify your example to the smallest possible ? shoudl be able tos hwo in a dozen line. also posting a running example makes my life much easier than having to recreate this.