Select

pgSelect is a fork of NG-ZORRO implementation of select dropdown. Initial credits go to the author

Importing

First import it to your app module or any submodule as you wish

import { pgSelectModule} from '../@pages/components/select/select.module';
@NgModule({
  imports: [pgSelectModule,...]
})
export class AppModule(){}

How to use

Basic Select with Search

HTML

<pg-select style="width: 100%;" [(ngModel)]="selectedOption" [PlaceHolder]="'Select Option'" AllowClear ShowSearch>
    <pg-option
    *ngFor="let option of options"
    [Label]="option.label"
    [Value]="option"
    [Disabled]="option.disabled">
    </pg-option>
</pg-select>

Typescript

selectedOption;
options = [
{ value: 'jack', label: 'Jacks' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'disabled', label: 'Disabled', disabled: true }
];

API

parameter	Instructions	Types of	Defaults
SearchChange	Search content change callback function, parameter search content	Func	no
Mode	Set the Select mode	'multiple' | 'tags'	-
OpenChange	Drop-down menu opens close callback function	Func	no
Filter	Whether according to input filter options	Boolean	true
KeepUnListOptions	When this attribute is added, data that is not in the current selection box but has been selected will remain valid only for multiple selections	attribute	-
AllowClear	When this attribute is added, it supports clearing, and the radio mode is valid.	attribute	-
ScrollToBottom	The drop-down menu scrolls to the bottom callback, which can be used as a trigger for dynamic loading	-	-
PlaceHolder	Select box default text	String	no
ShowSearch	Whether to enable the search box	Boolean	false
NotFoundContent	What to display when the drop-down list is empty	String	'Not Found'

Options API

parameter	Instructions	Types of	Defaults
Label	Display option content for display	String
#OptionTemplate	Used to customize the display of the drop-down section option	of-template
Disabled	Is it disabled	Boolean	false