closing dropdown after click in clarity

Question

I am able to select the dropdown and fetch data,but later dropdown is not closing.

Below is my html code for the same:

    <clr-dropdown [clrCloseMenuOnItemClick]="true" >
<button type="button" clrDropdownTrigger>
    <clr-icon shape="error" class="is-error" size="24"></clr-icon>
    <clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen> <label
    class="dropdown-header">Dropdown header</label>
<button type="button" class="dropdown-item "
    *ngFor="let module of moduleVal" (click)="selectModuleHandler($event)"
    value={{module}}>{{module}}</button>
</clr-dropdown-menu> </clr-dropdown>

I need to close dropdown once work is over,please help me on this.

Answer 1

You should use the Angular component for the dropdown, and then any link you want to autoclose on click you apply the clrDropdownItem directive to the menu items.

https://vmware.github.io/clarity/documentation/v0.11/dropdowns#example