Abstract away leaflet directive in custom directive

I'm currently working on an Angular 6 application that uses ngx-leaflet for using leaflet. We want to be able to create a base component that can be customized by adding directives to it. Basically the same pattern that is used when using draw capabilities using leafletDraw. But these directives should be more abstract then the leaflet and leafletDraw directives.
Currently we ended up with the following template that is used in our "base component"

<div class="map" leaflet [leafletOptions]="options" [leafletLayers]="layers" 
[leafletOptions]="options" leafletDraw [leafletDrawOptions]="drawOptions" poiSelection
 [poiSelectionOptions]="selectionOptions"
poiSelection [trackPlaybackOptions]="trackOptions">
</div>

As you can see this can end up in a big wall of directives on different abstraction levels.
I rather have this :

<app-our-nice-map poiSelection [poiSelectionOptions]="selectionOptions"
 [trackPlaybackOptions]="trackOptions">
</app-our-nice-map>

And the template for the OurNiceMapComponent component would look like this :

<div class="map" leaflet [leafletOptions]="options" [leafletLayers]="layers" 
[leafletOptions]="options">
</div><!-- this is here because Stackoverflow doesn't like single div /-->

There's two challenges with this.

1. Finding a way on how a higher level directive can be interacting/configuring (poiSelection) with a lower level directive (leafletDraw).
2. How to add a directive dynamically. As you can see in the above template for OurNiceMapComponent I didn't add leafletDraw, because that is only used by a specific higher level directive.

So the question is, how to create these "higher order directives".


from Abstract away leaflet directive in custom directive