Select
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(){}
Basic Select with Search
HTML
Typescript
<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>
selectedOption;
options = [
{ value: 'jack', label: 'Jacks' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'disabled', label: 'Disabled', disabled: true }
];
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' |
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 modified 5yr ago