Pages UI
Search…
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
1
import { pgSelectModule} from '../@pages/components/select/select.module';
2
@NgModule({
3
imports: [pgSelectModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

Basic Select with Search
HTML
Typescript
1
<pg-select style="width: 100%;" [(ngModel)]="selectedOption" [PlaceHolder]="'Select Option'" AllowClear ShowSearch>
2
<pg-option
3
*ngFor="let option of options"
4
[Label]="option.label"
5
[Value]="option"
6
[Disabled]="option.disabled">
7
</pg-option>
8
</pg-select>
Copied!
1
selectedOption;
2
options = [
3
{ value: 'jack', label: 'Jacks' },
4
{ value: 'lucy', label: 'Lucy' },
5
{ value: 'disabled', label: 'Disabled', disabled: true }
6
];
Copied!

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