Vizer / ngx-virtual-select-field

Virtual Select Field for Angular Material
MIT License
4 stars 1 forks source link
angular angular-material dropdown multiselect select virtual virtual-scroll

NPM Version GitHub Actions Workflow Status

Virtual Select component for Angular Material Form Field

This package replicates the Angular Material Select component with virtual scroll capabilities with help of cdk-virtual-scroll. It provides most major features of the original Angular Material Select component. The goal of this package is to provide similar api and features as the original Angular Material Select component but with virtual scroll capabilities. One major difference is that this package does not support option groups at the moment. Also, this requires own structural directive to be used for options in order to provide virtual scroll capabilities and custom template.

Features:

Not Supported Features for now:

Read NgxVirtualSelectField documentation

Demo

Getting Started

Example single select

<mat-form-field>
  <mat-label>Example</mat-label>
  <ngx-virtual-select-field [(value)]="value">
    <ngx-virtual-select-field-option 
      *ngxVirtualSelectFieldOptionFor="let option of options"
      [value]="option.value"> 
      {{ option.label }} 
    </ngx-virtual-select-field-option>
  </ngx-virtual-select-field>
</mat-form-field>

See more here