CODEWITHSUNDEEP
angular5vmware-clarity
Anand
Anand

Reputation: 645

closing dropdown after click in clarity

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.

Upvotes: 1

Views: 2492

Answers (2)

Soumya Kanti
Soumya Kanti

Reputation: 1479

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>

Upvotes: 0

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

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

Upvotes: 4

Related Questions