Deleting the selected edge is not working

[chethan1095]

Hi I have been trying to delete the connected edge between two nodes but using default backspace delete its not working.
Hers's the code for the same:-

component.html

` ```

```

          <div class="inline-row">
            <i class="bi bi-usb-symbol custom-icon"></i>
            &nbsp;&nbsp;&nbsp;
          </div>
          <p class="node-ip">{{ ctx.node.data.ip ? ctx.node.data.ip : ''}}</p>

          <span *ngIf="!ctx.node.data.ip" class="node-span">{{ ctx.node.data.text }}</span>
          <span *ngIf="ctx.node.data.ip" class="node-ip-span">{{ ctx.node.data.text }}</span>

          <handle type="source" position="right" />
          <handle type="target" position="left" />

        </div>
        <div class="inline-row" style="margin-left: 8rem;">
          <i class="bi bi-pencil" (click)="onNodeSelected(ctx.node.data)"></i>&nbsp;
          <i class="bi bi-trash" (click)="onDeleteNode(ctx.node.data)"></i>
        </div>

      </ng-template>

      <ng-template edge let-ctx>
        <svg:path selectable class="without-tab-index" [attr.d]="ctx.path()"
          [attr.stroke]="ctx.selected() ? '#0f4c75' : '#bbe1fa'" fill="none" stroke-width="4" tabindex="0"
          (keydown.backspace)="ctx.selected() && deleteEdge(ctx.edge)" />
      </ng-template>
    </vflow>

    <span *ngIf="nodes.length == 0">Drag and drop device here</span>

  </div>`

component.ts

deleteEdge(edge: Edge) { console.log(edge); this.edges = this.edges.filter(e => e.id !== edge.id) }

[artem-mangilev]

Hi! I would like to debug this thing, could you please create a stackblitz example for me?

I see the console.log(edge) in deleteEdge() method, does it called?

[chethan1095]

No it's not triggering deleteEdge()

[artem-mangilev]

So the next guess would be that ctx.selected() returns false

[artem-mangilev]

@chethan1095 it seem your issue might duplicate this one. Could you please confirm?
@rcambeirooreiro discovered that edge selection does not work within groups.