Is there a way to make components (not elements) draggable in angular?

Question

Im using the Angular CDK drag and drop module, it works well on html elements like div, p and such. but for some reason when i put a cdkDrag directive on a component, it doesnt work.

<!-- WORKS -->    
<div cdkDrag>content</div>    

<!-- DOESNT WORK -->
<my-component cdkDrag></my-component>

another thing i noticed is that every component in angular have width and height set to auto (basically 0x0), unless i edit the css and put display: block on the component style

Answer 1

A component is a custom tag. Within a browser this is treated as an 'unknown' tag, and made to have the default display of inline. This will also cause the dimensions to be 0x0 if you add block elements in there.

To overcome this, you should make it display: block or inline-block or flex (or whatever suits you) to make it also draggable. You can make a global class if this doesn't break the layout of the rest of your draggables:

.cdkDrag {
  display: inline-block;
}