mat-select-search-advanced
v0.6.0
Published
<h1 align="center">MAT SELECT SEARCH ADVANCE</h1>
Downloads
17
Maintainers
Readme
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>();