# ng2-material-dropdown

> Angular material-like dropdown component

Latest version **1.0.0** (published 2021-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-material-dropdown
pnpm add ng2-material-dropdown
yarn add ng2-material-dropdown
bun add ng2-material-dropdown
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-12-02 |
| First published | 2016-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 228.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Giancarlo Buomprisco |
| Maintainers | giancarlo_psk |
| Keywords | angular 6, angular 6 material dropdown, angular 6 component dropdown, angular 6 dropdown, angular 6 menu |

## Links

- npm: https://www.npmjs.com/package/ng2-material-dropdown
- Repository: https://github.com/Gbuomprisco/ng2-material-dropdown
- Issues: https://github.com/Gbuomprisco/ng2-material-dropdown/issues
- npm.io page: https://npm.io/package/ng2-material-dropdown

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 1.0.0 (latest) — 2021-12-02
- 0.9.4-beta2 (beta) — 2018-04-05
- 0.11.0 — 2019-10-15
- 0.10.1 — 2018-07-26
- 0.10.0 — 2018-05-13
- 0.9.5 — 2018-04-06
- 0.9.4-beta — 2018-04-05
- 0.9.3 — 2018-04-05
- 0.9.2 — 2018-04-05
- 0.9.1 — 2018-04-03
- 0.9.0 — 2018-04-02
- 0.8.2 — 2017-12-04
- 0.8.1 — 2017-12-04
- 0.8.0 — 2017-11-05
- 0.7.10 — 2017-08-19
- … 72 more at https://npm.io/package/ng2-material-dropdown/versions

## README

# Angular2 Dropdown Component

Material-like dropdown component for Angular2.

## Install

    npm install ng2-material-dropdown --save

## Usage

Once installed, import the directives and use it them your container component:

```html
<ng2-dropdown>
    <ng2-dropdown-button>
        Open Menu
    </ng2-dropdown-button>
    <ng2-dropdown-menu>
        <ng2-menu-item *ngFor="let page of pages">
            {{ page }}
        </ng2-menu-item>

        <div class='ng2-menu-divider'></div>

        <ng2-menu-item>
            With Divider
        </ng2-menu-item>
    </ng2-dropdown-menu>
</ng2-dropdown>
```

```javascript
// import module
import { Ng2DropdownModule } from 'ng2-material-dropdown';

@NgModule({
    imports: [ Ng2DropdownModule ]
    // ..
})
export class MyModule {}
```

## API

`ng2-dropdown`
- **`dynamicUpdate`** - **`[?boolean]`** : option to disable the dynamic update of the position on scroll events (defaults to `true`)
- **`onItemSelected()`** - **`[(onItemSelected($event)]`** : event that emits the currently selected/hovered item
- **`onItemClicked()`** - **`[(onItemClicked($event)]`** : event that emits the item clicked on
- **`onShow()`** - **`[(onItemClicked($event)]`** : event that emits when the dropdown gets shown
- **`onHide()`** - **`[(onItemClicked($event)]`** : event that emits when the dropdown gets hidden

`ng2-dropdown-menu`
- **`focusFirstElement`** - **`[?boolean]`** : by default the first element is immediately focused. You can disable by setting this option to false
- **`width`** - **`[?number]`**: this determines the width of the menu. Possible values are 2, 4 and 6. By default, this is set to 4
- **`offset`** - **`[?string]`**: offset to adjust the position of the dropdown with absolute values
- **`appendToBody`** - **`[?boolean]`** : by default the dropdown is appended to the body, but you can disable this by setting it to `false`


`ng2-dropdown-button`
- **`showCaret`** - **`[?boolean]`** : if present, a caret will be appended to the button's text

`ng2-menu-item`
- **`preventClose`** - `[?boolean]` : if present, this attribute prevents the menu to hide when the menu item is clicked
- **`value` - `[?any]`** : any value that you may want to attach to a menu item. Useful for using this component with other components.

---
_Source: https://npm.io/package/ng2-material-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._