AngularX Simple Select

Works with Angular Final and AOT compilation

Just a <select> tag to work with Reactive Forms or NgModel in AngularX

Quick start options

• Clone the repo: git clone https://github.com/demo-igor/ng2-simple-select.git.
• Install with npm: npm install ng2-simple-select --save.

Usage

Import SimpleSelectComponent into your @NgModule.

import { SimpleSelectModule } from 'ng2-simple-select';


@NgModule({
  // ...
  imports: [
    SimpleSelectModule,
  ]
  // ...
})

Define options in your consuming component:

import { SimpleSelectOption } from 'ng2-simple-select';


export class MyClass implements OnInit {
  optionsModel: number[];
  myOptions: SimpleSelectOption[];

  ngOnInit() {
    this.myOptions = [
      { name: 'Bananas', value: 1 },
      { name: 'Apples', value: 2 },
      { name: 'Tomatoes', value: 3 }
    ];
  }
  onChange() {
    console.log(this.optionsModel);
  }
}

In your template, use the component directive:

<simple-select
  [options]="myOptions"
  [(ngModel)]="optionsModel"
  (ngModelChange)="onChange($event)"
  >
</simple-select>

Customize

Settings

| Setting Item | Description | Default Value | | --------------------- | ------------------------------------------ | ---------------- | | isMultiple | The multiple <select> attribute | false | | showDefaultOption | The first empty option displaying | true | | defaultOptionValue | The first empty option value | '' |

Texts

| Text Item | Description | Default Value | | --------------------- | ------------------------------------------ | ---------------- | | defaultOption | The text for the first empty option | 'Select' |

Import any of the SimpleSelectSettings, SimpleSelectTexts interfaces to enable/override settings or texts:

// Default selection
optionsModel: number[] = [1, 2];

// Settings configuration
mySettings: SimpleSelectSettings = {
  isMultiple: true,
  showDefaultOption: false,
  defaultOptionValue: ''
};

// Text configuration
myTexts: SimpleSelectTexts = {
  defaultOption: 'Select some item'
};

// Options
myOptions: SimpleSelectOption[] = [
  { name: 'Bananas', value: 1 },
  { name: 'Apples', value: 2 },
  { name: 'Tomatoes', value: 3 }
];

<simple-select
  [options]="myOptions"
  [texts]="myTexts"
  [settings]="mySettings"
  [(ngModel)]="optionsModel"
  >
</simple-select>

Other examples

Use model driven forms with ReactiveFormsModule:

import { SimpleSelectOption } from 'ng2-simple-select';


export class MyClass implements OnInit {
  model: number[];
  myOptions: SimpleSelectOption[] = [
    { name: 'Bananas', value: 1 },
    { name: 'Apples', value: 2 },
    { name: 'Tomatoes', value: 3 }
  ];

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      optionsModel: [1, 2], // Default model
    });

    this.myForm.controls['optionsModel'].valueChanges
      .subscribe((selectedOptions: any) => {
        // changes
      });
  }
}

<form [formGroup]="myForm">
  <simple-select
    [options]="myOptions"
    formControlName="optionsModel"
  >
  </simple-select>
</form>

License

[MIT]