How to instantiate directive in a Angular component created dynamically?

Question

I'm creating a component through the ComponentFactoryResolver dynamically. But can't apply any directive to it.

ComponentCreation

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
const componentInstance: ComponentRef<any> = viewContainerRef.createComponent(componentFactory);

Tried directive instantiation in two places -

Component.ts

@HostBinding('attr.hxDraggableElement') hxDraggableElement = new DraggableElementDirective(this.el, this.renderer);

Or

Component Creation

componentInstance.instance.hxDraggableElement =
new DraggableElementDirective(componentInstance.instance.el,
  componentInstance.instance.renderer);
componentInstance.instance.hxDraggableElement.ngOnInit();

Also tried calling the NgOnInit method, Object creation in SetTimouts. No luck. The end result is very different from the directive-in-template way. The directive is added as a attribute-value pair to the element.

How can a directive be added to a dynamic component ?

If it can't be done, do you know of good practices about adding HostListeners, HostBinding dynamically to a component ? If keeping it inside Angular becomes too cumbersome, I might remove Angular APIs altogether from this dynamic component creations and do it in DOM.