Leverage Structural Directives to Create Powerful Components in Angular
In this article, we’ll learn how to create a powerful drop-down component with the help of structural directives.
Before you start, I highly recommend reading my article — The Power of Structural Directives in Angular.
We aren’t going to waste time on styling. We’ll take the CSS bootstrap dropdown style.
This will be our final result:
Let’s start with creating the component. I will omit the CSS classes so that we can focus on the important things.
We need a way to inject custom templates from outside one for the selected option and one for each option.
Let’s create two structural directives that will help us with this.
For the selected option:
For each option:
Nothing fancy here, we are just injecting the TemplateRef in both directives so that we can use them later in the parent component. Notice that in the NbSelectOptionDirective we also take as Input the option.
Now we can use them in our component.
We don’t need additional HTML tags, and that’s why we’re using ng-container. We’ll return soon to the let-selected part.
Now let’s get a reference to these directives in the nb-dropdown component and render the templates in the appropriate places.
We can use the @ContentChild and @ContentChildren decorators to get a reference to the directives instances. Now we can use them in our template.
We can use the ngTemplateOutlet directive to embed a view from a prepared TemplateRef and the ngOutletContext input to pass a context to the embedded view ( this is for the let-selected part ). We also add an Input for a placeholder.
The last thing is to create a custom form control for our component.
As you may know, if you want to create custom form control in Angular, you need to implement the ControlValueAccessor interface. I’m not going to go into this topic because it requires an article of its own. You can read more about the subject here.
Now let’s see the final component but this time we the syntactic sugar syntax.
Summary
We saw how we could create a powerful component with the help of structural directives. We’ve implemented only the basic of our dropdown, but you can take it from here to do anything that you need.
If you lack an understanding of any part of the article you can find the answer in the article I mentioned at the beginning.
You can play with the code here.
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
👂🏻 Last but Not Least, Have you Heard of Akita?
Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment for over seven months, and we’re continually adding features to it.
Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.
I highly recommend checking it out.
