CODEWITHSUNDEEP
angularjsangularui-select
imfarhad
imfarhad

Reputation: 172

ui-select replacement in Angular2

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?

Upvotes: 9

Views: 11264

Answers (6)

asdf_enel_hak
asdf_enel_hak

Reputation: 7630

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.

Upvotes: 2

Sufiyan Momin
Sufiyan Momin

Reputation: 121

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.

Upvotes: 0

Sufiyan Momin
Sufiyan Momin

Reputation: 121

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

Upvotes: -1

icfantv
icfantv

Reputation: 4643

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

Upvotes: 0

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

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.

Upvotes: -1

Cagatay Civici
Cagatay Civici

Reputation: 6504

PrimeNG's dropdown or multiselect may help.

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

or

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

Upvotes: 2

Related Questions