MAT SELECT SEARCH ADVANCE

_This project made by ZELLKON._

---

Github

NPM Package

Installation

npm i mat-select-search-advanced

How to use

Implement

$3



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

$3



@NgModule({

  imports: [

    ...

    MatSelectSearchAdvancedModule

  ],

  declarations: [	

    AppComponent,

   ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

$3

html

        [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)">





This code is just a sample



Properties - Config Mat-select-search-advance

$3

js

// if you wana change array

this.array = newArray.slice();

$3

html

  indexKey="id"

$3

html

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

$3

html

 [searchProperties]="['name']"

$3

html

  [showToggleAllCheckbox]="true"



##### or

html

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

$3

html

 placeholderSearchLabel="Search by name"

$3

html

 [multiple]="false"

$3

html

 [disabled]="false"



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

html

 appearance="outline"



Same for other attributes

js

  @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();

MAT SELECT SEARCH ADVANCE

_This project made by ZELLKON._

---

Github

NPM Package

Installation

npm i mat-select-search-advanced

How to use

Implement

$3



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

$3



@NgModule({

  imports: [

    ...

    MatSelectSearchAdvancedModule

  ],

  declarations: [	

    AppComponent,

   ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

$3

html

        [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)">





This code is just a sample



Properties - Config Mat-select-search-advance

$3

js

// if you wana change array

this.array = newArray.slice();

$3

html

  indexKey="id"

$3

html

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

$3

html

 [searchProperties]="['name']"

$3

html

  [showToggleAllCheckbox]="true"



##### or

html

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

$3

html

 placeholderSearchLabel="Search by name"

$3

html

 [multiple]="false"

$3

html

 [disabled]="false"



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

html

 appearance="outline"



Same for other attributes

js

  @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();