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?

Andri

Any update on this?? – Judiciary

I am currently using primeng dropdown component for my project – Andri

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.

Huston

Answer 2

PrimeNG's dropdown or multiselect may help.

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

or

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

Osteoclast

This doesn't allow to search in the list of the options of the dropdown :( – Cavetto

Add filter="true" – Osteoclast

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);
  }
}

Romilly

Link says page not found. Please correct it. "Here is a link to our source" – Kaka

@SangwinGawande unfortunately, we decided to go with an AngularJS and React hybrid application rather than migrate to Angular so the source was removed. I will update the description to remove that line. I will point out that the Angular docs do (or did) indicate how to do this. – Romilly

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.

Albumenize

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.

Siddur

Just so everyone is aware, Kendo UI is a commercial license and requires you to purchase a license for any other use than some hobby coding. – Denounce

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

Albumenize

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Rettke