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

<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>

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

Last updated