Can directive set another directives on the same element?

Purpose


I need to make my dialogs draggable. There are plenty of them and on each is my custom directive that sets styles etc.

Question


I wonder if there is an option for a directive to apply another directives on that element?

Code


My dialogs look more or less like this:

<custom-dialog-container>
<custom-dialog-header>...</custom-dialog-header>
<custom-dialog-content>
...
</custom-dialog-content>
<custom-button>
...
</custom-button>
</custom-dialog-container>


and the directive:

@Directive({
selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
@HostBinding('class') class = 'custom__dialog__header';
}


and I would like the directive to apply 3 draggable directives from cdk like in this answear:

<h1 mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
Hi {{data.name}}
</h1>


Is it possible to do it using the custom directive? Thank you in advance for any help.

Continue reading...