Menu
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.
So the question is, how to create these "higher order directives".
937
When no additional template is required, attribute directives, also known as custom directives, are utilised. The directive has the ability to run logic and make visual modifications to the element to which it is applied. If you want to change the behaviour or style of existing HTML elements without creating a new component, this is a good option.
Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements. A custom directive is defined as an object containing lifecycle hooks similar to those of a component. The hooks receive the element the directive is bound to.
In Vue, what is a custom directive? Directives are special attributes that begin with the letter v. When the value of a directive's expression changes, the directive's role is to reactively apply side effects to the DOM. When would a custom directive be useful?
On the other hand, the second Heading 2 is styled using a custom directive called v-magic. The components accept a directives option where you can define your custom directives. As you can see, the purpose of both the directives is the same, but the syntax is quite different.
There is workaround, you can use ngSwitch/ngIf and render leaflet with correct set of directives depending on component options.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
