MAT SELECT SEARCH ADVANCE

A This project made by the ZELLKON.

---

Github

NPM Package

Base ngx-mat-select-search

Installation

npm i mat-select-search-advanced

How to use

Implement

Import MatSelectSearchAdvancedModule into your module

import { MatSelectSearchAdvancedModule } from 'mat-select-search-advanced';

Add Module

@NgModule({
  imports: [
    ...
    MatSelectSearchAdvancedModule
  ],
  declarations: [	
    AppComponent,
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use library in your component

<mat-select-search-advanced 
        [objects]="getObject()" indexKey="id" 
        [viewKey]="['name']" 
        [searchProperties]="['name', 'age']"
        [initData] = "listId"
        placeholderSearchLabel="Search by name" 
        label="List Animal" 
        messageErrorRequired="You need select some thing"
        noEntriesFoundLabel="Found nothing" 
        tooltipMessage="Select all / Deselect all" 
        selectAllViewLabel="All animal"
        (listSelected$)="getListSelected($event)">
    </mat-select-search-advanced>

This code is just a sample

Properties - Config Mat-select-search-advance

objects (this is your Observable array)

Convert array to Observable array

import { Observable, of } from 'rxjs';
  getObject(){
  return of(yourArray)
}

Accept Subject and RelaySubject or BehaviorSubject

// if you need change value realtime just use Subject
observableArray: Subject<any[]> = new ReplaySubject<any[]>(1);

// change value observableArray
observableArray.next(newData);

indexKey (this is your index your object, example: id)

  indexKey="id" 

viewKey (custom view value in mat-select)

 [viewKey]="['name', 'age']"

searchProperties (list key of object for search)

 [searchProperties]="['name']"

showToggleAllCheckbox (true or false)

  [showToggleAllCheckbox]="true"

or

 [searchProperties]="['name','age',...]"

placeholderSearchLabel (lable on search input)

 placeholderSearchLabel="Search by name" 

initData (init data in edit mode, example: Observable value)

 [initData]="listId" 

or

 [initData]="1" 

multiple (true or false)

 [multiple]="false"

disabled (true or false)

 [disabled]="false"

listSelected$ (result)

 (listSelected$)="getListSelected($event)"

create function getListSelected in your component.ts

 getListSelected(result: any){
    console.log(result);
  }

create function toggleAll in your component.ts

 getToggleAll(result){
    console.log(result);
  }

Same for other attributes