@lukana/dropdowns

Lukana dropdowns

Simple dropdown using only @angular/cdk as dependencies.

Usage

DropdownsModule

<div class="dropdown" lukanaDropdown>
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Dropdown button
    </button>
    <div *lukanaDropdownBody class="dropdown-menu">
        <a class="dropdown-item">Action</a>
        <a class="dropdown-item">Another action</a>
        <a class="dropdown-item">Something else here</a>
    </div>
</div>

Options

hideOnClick: boolean - default true

If You don't want to hide dropdown with every click on dropdown's body use [hideOnClick]="false" attribute. Then You have to hide it manually like this:

<div class="dropdown" lukanaDropdown [hideOnClick]="false" #ld="lukanaDropdown">
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Don't close on click
    </button>
    <div *lukanaDropdownBody [@dropdownAnimation] class="dropdown-menu"
         style="position: static; display:block">
        <a class="dropdown-item" (click)="chosen=1; ld.hide()">Click and hide</a>
        <a class="dropdown-item" (click)="chosen=2">Click and don't hide</a>
    </div>
</div>

Animations

To use animation add [@dropdownAnimation] with propper animation in Your component example

import {dropdownAnimation} from "@lukana/dropdowns";
@Component({
  ...
  animations: [dropdownAnimation]
})
export class ...

<div class="dropdown" lukanaDropdown #d="lukanaDropdown">
    <button lukanaDropdownToggle class="btn btn-secondary dropdown-toggle" type="button">
        Dropdown button
    </button>
    <div *lukanaDropdownBody [@dropdownAnimation] class="dropdown-menu">
        <a class="dropdown-item">Action</a>
        <a class="dropdown-item">Another action</a>
        <a class="dropdown-item">Something else here</a>
    </div>
</div>

<button class="btn btn-secondary" (click)="d.show()">Show</button>