Dynamically adding Moveables not working

[javanese84]

Environments

• Framework name: Angular
• Framework version: ^0.49.0

Description

I am not able to dynamically add a new Moveable. I have 3 Moveables initially which are working and call the following function to add a new one, which is displayed but NOT working (not draggable, nor resizable).

HTML markup:

<div class="container" id="container" #container>
  <img class="target w-20" src="assets/sticker/tractor.png" />
  <img class="target w-20" src="assets/sticker/tractor.png" />
  <img class="target w-20" src="assets/sticker/tractor.png" />
  <ngx-moveable
              #moveable
              [target]="'.target'"
              [hideDefaultLines]="true"
              [individualGroupable]="true"
              [draggable]="true"
              [throttleDrag]="throttleDrag"
              [edgeDraggable]="false"
              [startDragRotate]="startDragRotate"
              [throttleDragRotate]="throttleDragRotate"
              [scalable]="scalable"
              [keepRatio]="keepRatio"
              [throttleScale]="throttleScale"
              [renderDirections]="renderDirections"
              [rotatable]="rotatable"
              [throttleRotate]="throttleRotate"
              [rotationPosition]="rotationPosition"
              (drag)="onDrag($event)"
              (scale)="onScale($event)"
              (rotate)="onRotate($event)"
 ></ngx-moveable>
</div>

function in component.ts

async addSticker(sticker: Sticker) {
    const container = document.getElementById('container');
    if (container) {
      let img = document.createElement('img');
      img.className = 'target w-20';
      img.src = sticker.asset
      container.appendChild(img);
      // await this.moveable.updateRect();
      this.moveable.updateSelectors(); 
    }
  }

[daybrush]

@javanese84

Dragging a group requires dragGroup, scaleGroup, and rotateGroup.

https://daybrush.com/moveable/storybook/?path=/story/group--group-draggable-scalable-rotatable

[javanese84]

@daybrush thanks for your answer, but that doesn't solve my issue when dynamically adding another item to the group. The added item is not recognized by the moveable component and so does not work. Can maybe provide an example of dynamically adding a item to the moveable component?