Ngx Mat Dropdown

* A simple dropdown/select with search option (single).
* It is based on angular material (should install npm i @angular/material @angular/cdk).
* can be used above Angular >=9 && @angular/material @angular/cdk >=9

Installation

npm i ngx-mat-dropdown

API

import { MatDropdownModule } from 'ngx-mat-dropdown';

selector: ngx-mat-dropdown

$3

| Input | Type | Required | Description |
| ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- |
| dropdownSettings | DropdownSettingsModel | YES |
| ctrl | FormControl | optional |
| disabled | boolean | optional |
| dropdownList | Array | YES |
| selectedItems | any | YES |

$3

| Output | Type | Required | Description |
| ---------------- | ---------- | -------- | ------------------------------------------------------ |
| onselectItems | any | optional | emits on change. |

Usage

1) Register the MatDropdownModule in your app module.
> import { MatDropdownModule } from 'ngx-mat-dropdown'

``typescript

import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDropdownModule } from "ngx-mat-dropdown";

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,

MatDropdownModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

`

2) Use the dropdown component (ngx-mat-dropdown) in your component.

`typescript
import { Component, OnInit } from '@angular/core';
import { DropdownSettingsModel } from 'ngx-mat-dropdown';

@Component({
selector: 'app-root',
template: [dropdownList]="userList" [selectedItems]="selected" (onselectItems)="selected = $event.value">

,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
userList =[
{ id:1,name:'user1' },
{ id:2,name:'user2' },
{ id:3,name:'user3' },
{ id:4,name:'user4' },
{ id:5,name:'user5' },
{ id:6,name:'user6' },
]

selected=null;

ngOnInit(){
this.selected= this.userList[0]
}
setDropdownSettings(id,isMultiple,placeholder,label,key,tooltip):DropdownSettingsModel{
return new DropdownSettingsModel(id,isMultiple,placeholder,label,key,tooltip)

}
}


export class DropdownSettingsModel{
id: string;
multiple: boolean; // single/multiselect
placeholder: string;
labelKey: string; // view value
keyValue: string; // unique id/value
tooltip: string;
constructor(id = "", multiple = false, placeholder = "Search", labelKey = "name", keyValue = "key", tooltip = "Code") {
this.id = id;
this.multiple = multiple;
this.placeholder = placeholder;
this.labelKey = labelKey;
this.keyValue = keyValue;
this.tooltip = tooltip ? tooltip : labelKey;
}

}
`

Running the example in local env

* npm i
* Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/`. The app will automatically reload if you change any of the source files.