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="col-sm-8 drop-zone" [cdkDropListData]="newConfig" cdkDropList (cdkDropListDropped)="drop($event)">
<vflow [nodes]="nodes" *ngIf="nodes.length>0" [edges]="edges" background="ghostwhite" [connection]="connectionSettings" (onConnect)="createEdge($event)" view="auto">

```

   

{{ ctx.node.data.ip ? ctx.node.data.ip : ''}}

{{ ctx.node.data.text }} {{ ctx.node.data.text }}

 

      <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()