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

@Inputs()

| Input | Type | Required | Description | | ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- | | dropdownSettings | DropdownSettingsModel | YES | | ctrl | FormControl | optional | | disabled | boolean | optional | | dropdownList | Array | 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'

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.

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.