closing dropdown after click in clarity - angular5

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

Answer 2

A simple example of About menu on the header:
<div class="header-actions">
<clr-dropdown>
<button class="btn" clrDropdownTrigger>
{{loggedOnUsername}}
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<button type="button" (click)="openUserDialog = true" clrDropdownItem>Manage Users</button>
<button type="button" (click)="openAboutDialog = true" clrDropdownItem>About</button>
<button type="button" (click)="onLogout($event)" clrDropdownItem>Logout</button>
</clr-dropdown-menu>
</clr-dropdown>
</div>