Description

ng-simple-select

This project is an example of how to set up and use the ng-select component with support for multiple selection, search, worker and virtual scrolling in Angular.

Table of Contents

• Installing
  • Package manager
• Example

Installing

Package manager

Using npm:

$ npm install ng-simple-select

1. Install necessary dependencies:

Dependencies and versions

  "@angular/animations": "^17.3.11",
  "@angular/cdk": "^17.3.10",
  "@angular/common": "^17.1.0",

  $ npm install @angular/[email protected] @angular/[email protected] @angular/[email protected]

  import { SimpleSelectComponent, ngOptionComponent } from 'ng-simple-select';

Example

  @Component({
    standalone: true,
    imports: [
      SimpleSelectComponent,
      ngOptionComponent,
      FormsModule
    ]
  })

  export class Component {
    filter: string[] = [];
    options: string[] = ['1', '2', '3'];
  }

    <ng-select
      AllowClear 
      [ShowSearch]="Boolean"
      Mode="Isin['multiple', 'single']" 
      PlaceHolder="String" 
      (SearchChange)="EventEmitter" 
      (OpenChange)="EventEmitter" 
      NotFoundContent="String"
      SearchPlaceHolder="String"
      [(ngModel)]="filter"
    >
      @for (option of options; track option) {
        <ng-option 
          [Label]="option" 
          [Value]="option">
          {{ option }}
        </ng-option>
      }
    </ng-select>

Properties and Events

AllowClear: Allows clearing the selection.

[ShowSearch]: Displays the search box.

Mode: Selection mode (e.g., 'multiple' for multiple selection).

PlaceHolder: Placeholder text.

(SearchChange): Event triggered when the search changes.

(OpenChange): Event triggered when the dropdown is opened/closed.

NotFoundContent: Text displayed when no results are found.

SearchPlaceHolder: Placeholder text for the search box.

[(ngModel)]: Binds the model to the filter value.