costimize-mat-select-autocomplete
Version:
Angular material select component with autocomplete and select all features
74 lines (73 loc) • 3.97 kB
TypeScript
import { AfterViewInit, ChangeDetectorRef, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
import { ControlValueAccessor, UntypedFormControl } from '@angular/forms';
import { MatButtonToggleChange, MatButtonToggleGroup } from '@angular/material/button-toggle';
import { CdkVirtualScrollViewport, ScrollDispatcher } from '@angular/cdk/scrolling';
import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
import { Subscription } from 'rxjs';
import { DropdownKeyValue } from './DropdownKeyValue';
import { MatCheckboxChange } from '@angular/material/checkbox';
import * as i0 from "@angular/core";
export declare class SelectAutocompleteComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
private cd;
readonly sd: ScrollDispatcher;
selectPlaceholder: string;
placeholder: string;
options: DropdownKeyValue[];
errorMsg: string;
showErrorMsg: boolean;
selectedOptions: any;
multiple: boolean;
favourites: boolean;
filterButtons: Array<{
name: string;
filterCallback: (key: string, value: string) => boolean;
}>;
selectAll: string;
appearance: 'standard' | 'fill' | 'outline';
selectElem: any;
toggleGroup: MatButtonToggleGroup;
cdkVirtualScrollViewPort: CdkVirtualScrollViewport;
matOptions: QueryList<MatOption>;
filteredOptions: DropdownKeyValue[];
selectAllChecked: boolean;
customSelectAllChecked: boolean;
displayString: string;
formControl: UntypedFormControl;
selected: string[] | string | null;
isSelectedFavourite: boolean;
searchInputFormControl: UntypedFormControl;
searchInputFormControlSubscription: Subscription;
lastEmittedValue: string[] | string | null | undefined;
constructor(cd: ChangeDetectorRef, sd: ScrollDispatcher);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
toggleDropdown(): void;
toggleSelectAll(event: MatCheckboxChange): void;
filterItem(value: string): void;
getFilteredOptionsValues(): string[];
getDisplayString(): string;
onSelectionChange(change: MatOptionSelectionChange): void;
trackByFn: (index: any, item: any) => any;
changeSelectedValues(clickedButtonEvent: MatButtonToggleChange, filterCallback: (key: string, value: string) => boolean): void;
writeValue(selectedElements: string | string[] | null, clearLastEmittedValue?: boolean): void;
onTouch: () => void;
propagateChange: (_: any) => void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(isDisabled: boolean): void;
onClickOpen(): void;
onClickClose(): void;
private emitValueIfChanged;
private deselectButtons;
private reorderOptionsFavouritesFirst;
private reorderOptionsSelectedFirst;
private optionIsSelected;
private patchValue;
ngOnDestroy(): void;
private getValueToPropagate;
private valueChanged;
private arraysHaveTheSameElements;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectAutocompleteComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectAutocompleteComponent, "mat-select-autocomplete", never, { "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "errorMsg": { "alias": "errorMsg"; "required": false; }; "showErrorMsg": { "alias": "showErrorMsg"; "required": false; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "favourites": { "alias": "favourites"; "required": false; }; "filterButtons": { "alias": "filterButtons"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, never, false, never>;
}