A simple Angular 6 dropdown menu with search.
npm install ngx-dropdown-menu-search --save
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDropdownMenuSearchModule } from 'ngx-dropdown-menu-search'; // <-- import the module
import { MyComponent } from './my.component';
@NgModule({
imports: [ BrowserModule, NgxDropdownMenuSearchModule ], // <-- include it in your app module
declarations: [ MyComponent ],
bootstrap: [ MyComponent ]
})
export class MyAppModule {}
// my.component.ts
import { Component, OnInit } from '@angular/core';
import { IConfig } from 'ngx-dropdown-menu-search';
type NameAndId = {name: string, id: number};
@Component({
selector: 'my-component',
template: `
<div style="width: 300px">
<ngx-dropdown-menu-search
[config]="config"
[options]="options"
[selectedOption]="selectedOption"
(onOptionSelect)="onDropdownOptionSelect($event)">
</ngx-dropdown-menu-search>
</div>
`
})
export class MyComponent {
public config: IConfig;
public options: any[];
public selectedOption: any;
constructor() {}
ngOnInit() {
//initialize your config object, all properties are optional
this.config = {
height: '30px',
lineHeignt: '30px',
searchEnabled: true
}
//an array of objects, requires a name property
this.options = [
{
name: 'Option1',
id: 1
},
{
name: 'Option2',
id: 2
}
]
//pass a pre-defined selected option to the dropdown (optional)
this.selectedOption = 'my selected option';
}
public onDropdownOptionSelect(option: NameAndId): void {
this.selectedOption = option;
}
}
Customization for the dropdown-menu can be achieved via the config object. Available properties are as follows:
config = {
flow: string, // 'down' is set by default, set to 'up' if desired
height: string, //set height of dropdown label
lineHeight: string, //set line height of dropdown label
isDisabled: boolean, //disables dropdown menu if true
searchEnabled: boolean, //if true, search input is available, filters results
scrollbarVisible: boolean //scrollbar appears to the right if true
}
Custom styling can be achieved by simply overriding the default styles. To overcome Angular's view encapsulation, you may need to use the /deep/ operator to target it (depending on the type of encapsulation your component is using).
To avoid specificity issues, just add your own custom class name to the element, which will allow your styles to override the defaults:
.my-dropdown /deep/ .dropdown {
color: blue;
}
<ngx-dropdown-menu-search class="my-dropdown"></ngx-dropdown-menu-search>