ui-select replacement in Angular2

Question

We are moving our existing angular1 project to angular2 and want to replace the existing ui-select component.

I have googled, but couldn't find the ui-select version for angular2.

Has anyone found a better alternative?

Answer 1

ng2-select would do some of it. But it does not support dynamic data binding yet.

Actually, almost any of third party plugins implemented for angular is not implemented for angular2.

Answer 2

PrimeNG's dropdown or multiselect may help.

http://www.primefaces.org/primeng/#/dropdown

or

http://www.primefaces.org/primeng/#/multiselect

Answer 3

If anyone is migrating to ng2 and needs to run a hybrid application (running both ng1 and ng2 - now called AngularJS and Angular respectively) it is possible to wrap ng1 UI widgets that were not created using ng1 components (like ui-select) for use within ng2 component templates. We've done this successfully with ui-select and it works great. In particular, look at the @Directive annotation binding.

import {Directive, ElementRef, Injector, Input} from '@angular/core';
import {UpgradeComponent} from '@angular/upgrade/static';
import {module, IComponentOptions} from 'angular';

class UiSelectComponent implements IComponentOptions {

  public bindings: any = {
    items: '<',
    model: '<',
    modelProperty: '@',
    placeholder: '@',
    renderProperty: '@',
    selectProperty: '@'
  };
  public template = `
    <ui-select ng-model="$ctrl.model[$ctrl.modelProperty]" class="form-control input-sm" required>
      <ui-select-match placeholder="{{$ctrl.placeholder}}">{{$select.selected[$ctrl.renderProperty]}}</ui-select-match>
      <ui-select-choices repeat="item[$ctrl.selectProperty] as item in $ctrl.items | filter: $select.search">
        {{item[$ctrl.renderProperty]}}
      </ui-select-choices>
    </ui-select>
  `;
}

const selector = 'uiSelectWrapper';
export const UI_SELECT_COMPONENT = 'spinnaker.core.widget.uiSelect.component';
module(UI_SELECT_COMPONENT, []).component(selector, new UiSelectComponent());

@Directive({
  selector: 'ui-select-wrapper'
})
export class UiSelectComponentDirective extends UpgradeComponent {

  @Input()
  public items: any[];

  @Input()
  public model: any;

  @Input()
  public modelProperty: string;

  @Input()
  public placeholder: string;

  @Input()
  public renderProperty: string;

  @Input()
  public selectProperty: string;

  constructor(elementRef: ElementRef, injector: Injector) {
    super(selector, elementRef, injector);
  }
}

Answer 4

Please check ng-select. It has single select, multi-select, search autocomplete, tags, grouping, and all of above virtual scrolling too. I hope this might help.

Answer 5

For components developed specifically for Angular 2, see the DropDowns package of Kendo UI for Angular 2. It's still in beta, and feedback is welcome.

Answer 6

Have you seen ngx-select-ex fork of ng2-select. ngx-select-ex has single select, multiselect, slected, blur event like select2. Please have a look, demo of ngx-select-ex