mat-select-search-advanced v0.6.0

This project made by ZELLKON.

Github

NPM Package

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]="array" indexKey="id" 
        [viewKey]="['name']" 
        [searchProperties]="['name', 'age']"
        placeholderSearchLabel="Search by name" 
        label="List Animal" 
        messageErrorRequired="You need select some thing"
        noEntriesFoundLabel="Found nothing" 
        tooltipMessage="Select all / Deselect all" 
        selectAllViewLabel="All animal"
        [required] = "true"
        formControlName="yourFormControl"
        (optionSelect$)="getOptionSelected($event)">
    </mat-select-search-advanced>

This code is just a sample

Properties - Config Mat-select-search-advance

objects

// if you wana change array
this.array = newArray.slice();

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" 

multiple (true or false)

 [multiple]="false"

disabled (true or false)

 [disabled]="false"

appearance ('outline' | 'fill' | ...)

 appearance="outline"

Same for other attributes

  @Input()
  objects!: TObject[];
  @Input()
  searchProperties: (keyof TObject)[] = [];
  @Input()
  indexKey!: keyof TObject;
  @Input()
  viewKey!: (keyof TObject)[];
  @Input() tooltipMessage = 'Select all / Deselect all';
  @Input() placeholderSearchLabel = 'Search';
  @Input() noEntriesFoundLabel = 'No results found';
  @Input() label = '';
  @Input() selectAllViewLabel = 'All';
  @Input() showToggleAllCheckbox = true;
  @Input()
  multiple!: boolean;
  disabled!: boolean;
  @Input() messageErrorRequired = `Can't be null`;
  @Input() appearance: MatFormFieldAppearance = 'fill';
  @Input() tooltipPosition: 'below' | 'above' | 'left' | 'right' = 'above';
  @Input() required = true;
  @Output() optionSelected$ = new EventEmitter<any>();