Weekly Webtips
Published in

Weekly Webtips

Nice Angular Material selection dropdown

TL;DR: Lets implement a nice dropdown component using Angular mat-select with icons and custom closed option.

finished output
Photo by Priscilla Du Preez on Unsplash

Requirements. So let’s say this component should be able to take initial state on input and emit changes on output, right? Let’s assume we will use it for changing some layout elsewhere.

Parent

Lets add this tag in html our new component by its selector my-custom-dropdown. To send data down into component, we need add isTileLayout property of the tag. We use one way data binding.

html

This variable (isTileLayout)holds initial state of our dropdown, for our simple example we will use boolean with two states. You can modify this example to have multiple choices.

To be able to know what user has chosen in child component, we need to catch event from child and process it. We create function onToggleLayout and it down to component. In parent component we can just catch emitted value and set the current state of previously created boolean variable.

typescript

Child template

This is actual component where magic is done. Base is simple mat-form-field with mat-select component inside. It adds mat-option generated from data provided combined with ngFor structural directive. To have option to modify what is inside of closed dropdown list we will use here mat-select-trigger.

BUT this needs one workaround. Why? Because material-select does not know how to select and compare item from mat-select options, so we will handle it programmatically.

Simply put, use compareWith property of mat-select and use custom function which returns a boolean value. Here you can find more info -> Link to angular docu.

What it looks like in template of our my-custom-dropdown:

html template of component

Value is two way binding data to have changes directly mirrored in variable.

Selection change is handle in function toggle and value is emitted to parent.

Compare functions handles selection of item from option. And fixes bug, when page is loaded there is nothing displayed in closed dropdown.

mat-select-trigger is freely customizable to show what you want, so therefore you are not tied to mat options anymore. Without select-trigger you will end up with same layout in closed dropdown like in open (with bonus of not rendering icons properly).

Child directives

And here is component typescript code.
The most important thing is to have set correctly @input and @output variables / emitters.
Setup options in tableLayouts variable. Select default option in selectedLayout .
onInit select corresponding option coming from parent.
Emit value to parent in toggle function.
Create custom compare function for option data you used.

here is component typescript code

That’s all. Customize, compile, have fun…

finished output

!Note: don’t forged add all imports in a parent, child and module.ts

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store