https://github.com/Gbuomprisco/ng2-material-dropdown

Angular 2 Material-like Dropdown Component
https://github.com/Gbuomprisco/ng2-material-dropdown

angular angular-components material-components material-design

Last synced: 3 months ago
JSON representation

Angular 2 Material-like Dropdown Component

• Host: GitHub
• URL: https://github.com/Gbuomprisco/ng2-material-dropdown
• Owner: Gbuomprisco
• License: mit
• Created: 2016-06-29T17:06:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T02:18:02.000Z (almost 2 years ago)
• Last Synced: 2024-07-07T03:24:24.025Z (4 months ago)
• Topics: angular, angular-components, material-components, material-design
• Language: TypeScript
• Homepage:
• Size: 2.5 MB
• Stars: 37
• Watchers: 2
• Forks: 55
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - ng2-material-dropdown - Material Dropdown for Angular 2 (Angular / Components)

README

        
# Angular2 Dropdown Component

Material-like dropdown component for Angular2.

NB: This repository is currently unmaintained. Please fork or use Angular Material's module, it's better.

## Install

    npm install ng2-material-dropdown --save

## Usage

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

```html

    

        Open Menu

    

    

        

            {{ page }}

        

        


        

            With Divider

        

    

```

```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.