ngx-mat-dropdown/README.md

Angular Dropdown with search/filter option

# 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';`<br>
`selector: ngx-mat-dropdown`

### @Inputs()

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


### @Outputs()

| 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: ` <ngx-mat-dropdown [dropdownSettings]="setDropdownSettings('userList-id',false,'users','name','id','name')"
        [dropdownList]="userList" [selectedItems]="selected" (onselectItems)="selected = $event.value">
      </ngx-mat-dropdown>
`,
  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.