Using ng2-select

[stanimirtt]

Hello,

I am trying to include this component in my project. I have created select component and it does not load. I am getting this error:

This is the code for component:

import {Component} from 'angular2/core';

import {SELECT_DIRECTIVES} from 'ng2-select';

@Component({
  selector: 'my-select',
  directives: [SELECT_DIRECTIVES],
  template: `
    <h3>Select a hero</h3>
    <ng-select></ng-select>
    `
})

export class SelectComponent { 

}

I am using routes to navigate to that component. The project is located here - https://github.com/stanimirtt/Angular-2-App

I have notice that if I remove directives: [SELECT_DIRECTIVES] it loads. In the other way, stuck to loadin... Thanks in advance for the help!

[vaer-k]

I don't know the solution to your problem, but there is some conflicting documentation about how to use this library. Maybe take a look at the code in the demo: http://valor-software.com/ng2-select/

import {select} from 'ng2-select';

// class Select @Component({ selector: 'ng2-select', properties: [ 'allowClear', 'placeholder', 'items', 'multiple', 'showSearchInputInDropdown'] })

[stanimirtt]

I have tried following implementation:

import {Component} from 'angular2/core';

import {select} from 'ng2-select';

@Component({
    selector: 'ng2-select',
    template: `
    <ng2-select [allow-clear]="true"
                [items]="items"
                [disabled]="disabled"
                (data)="refreshValue($event)"
                (selected)="selected($event)"
                (removed)="removed($event)"
                (typed)="typed($event)"
                [placeholder]="'No city selected'"></ng2-select>
    `,
    directives: [SelectComponent],
    properties: [
        'allowClear',
        'placeholder',
        'items',
        'multiple',
        'showSearchInputInDropdown']
})

export class SelectComponent { 
    private value: any = {};
    private _disabledV: string = '0';
    private disabled: boolean = false;
    private items: Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
        'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
        'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf',
        'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', 'Hamburg', 'Hannover',
        'Helsinki', 'Leeds', 'Leipzig', 'Lisbon', 'Łódź', 'London', 'Kraków', 'Madrid',
        'Málaga', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Naples', 'Palermo',
        'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 'Rotterdam', 'Seville', 'Sheffield',
        'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna',
        'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza'];

    private get disabledV(): string {
        return this._disabledV;
    }

    private set disabledV(value: string) {
        this._disabledV = value;
        this.disabled = this._disabledV === '1';
    }

    private selected(value: any) {
        console.log('Selected value is: ', value);
    }

    private removed(value: any) {
        console.log('Removed value is: ', value);
    }

    private typed(value: any) {
        console.log('New search input: ', value);
    }

    private refreshValue(value: any) {
        this.value = value;
    }
}

Now, I am getting EXCEPTION: RangeError: Maximum call stack size exceeded

[vaer-k]

Yes, I'm having this problem too. See #45

[vaer-k]

I was able to get mine working. @stanimirtt you were importing and injecting correctly the first time. I've closed my duplicate issue #45

[alejandrohn]

exists any solution?