Hello! In order to drag a block from your Angular component to the canvas you need to send a message from your angular component to your extension with the following method:

parent.postMessage({message: 'drag'})

You then need to deal with that message in your panel extension code by utilizing the messageFromFrame() method:

protected async messageFromFrame(message: any) {
    if(message == 'drag'){
        const myBlock = await this.viewport.startDraggingNewBlock(...);
    }
}

For more details take a look at Step 7 of the angular guide: https://developer.lucid.co/guides/#step-7-bonus-add-drag-and-drop-functionality

Are you able to see the shape on the canvas at any point? If not it may be that you are missing "this.client.loadBlockClasses([<your_block>])" when you first load up your extension/panel. If the problem is just the fact that the block isn't being placed (or removed from your cursor) on pointer up when over the canvas then it could be because you need to send a message back to your angular app to remove any listeners related to pointer-up/move:

private stopDrag() {
    ...

    window.document.removeEventListener('pointerup' this.documentPointerUp);
    window.document.removeEventListener('pointermove' this.documentPointerMove);
    this.stopCanvasDrag();  // This tells the extension code to call "this.viewport.cancelDraggingNewBlock()"
                            // which is needed to finalize the placement of the block.
}

Thank you Connor the solution was that i received an object but in the tutorial they compare the object with a string i changed this and works. 

Thank for every thing