Add directives to component selector when it is declared - Angular 7

问题

I am learning Angular and am creating components dynamically on the click of a button. I am trying to use Angular Material's drag and drop feature to drag these created components to sort them. I have the following code in my base component html:

<div cdkDropList style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <div #container></div>
</div>

And the Typescript code has the following code:

@ViewChild('container', {read: ViewContainerRef})
  container: ViewContainerRef;

const childComponent = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);
const component = this.container.createComponent(childComponent);

So far, I have managed to create components dynamically, and have managed to get them as child of div with the directive "cdkDropList".

What I am not able to do is get the components created with the cdkDrag directive declared in its element name. For eg:

<app-CustomComponent cdkDrag>

I am looking into @HostBinding and can create components with attributes. Not able to figure out how to use it to declare directives. I am sure I am missing something obvious, but so far I am stuck. Please help.

来源：https://stackoverflow.com/questions/56072516/add-directives-to-component-selector-when-it-is-declared-angular-7