Nsryjdtyk

I'm developing an app using the latest version of JHipster where I'm trying to show a multiple select dropdown by using a {<ng-select>} module from https://github.com/ng-select/ng-select. But it's not displayed.
Here is the code below.
My app.module.ts file:

import { FormsModule } from '@angular/forms';

import { NgSelectModule } from '@ng-select/ng-select';

// jhipster-needle-angular-add-module-import JHipster will add new module  here

import { JhiMainComponent, NavbarComponent, FooterComponent, PageRibbonComponent, ActiveMenuDirective, ErrorComponent } from './layouts';



@NgModule({

imports: [

    BrowserModule,

    NgSelectModule,

    FormsModule,

    MyAppAppRoutingModule,

    Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-' }),

    MyAppSharedModule,

    MyAppCoreModule,

    MyAppHomeModule,

    MyAppAccountModule,

    // jhipster-needle-angular-add-module JHipster will add new module here

    MyAppEntityModule

],

declarations: [JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],

providers: [

    -----------

],

bootstrap: [JhiMainComponent]

})

...........

The DataService:

export interface Person {

id: string;

isActive: boolean;

age: number;

name: string;

gender: string;

company: string;

email: string;

phone: string;

disabled?: boolean;

}

@Injectable({ providedIn: 'root' })

export class DataService {

   .......



constructor(private http: HttpClient) {}

........



getPeople(term: string = null): Observable<Person> {

    let items = getMockPeople();

    if (term) {

        items = items.filter(x => x.name.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1);

    }

    return of(items).pipe(delay(500));

}



}



function getMockPeople() {

return [

    {

        'id': '5a15b13c36e7a7f00cf0d7cb',

        'index': 2,

        'isActive': true,

        'picture': 'http://placehold.it/32x32',

        'age': 23,

        'name': 'Karyn Wright',

        'gender': 'female',

        'company': 'ZOLAR',

        'email': 'karynwright@zolar.com',

        'phone': '+1 (851) 583-2547'

    },

    {

        'id': '5a15b13c2340978ec3d2c0ea',

        'index': 3,

        'isActive': false,

        'picture': 'http://placehold.it/32x32',

        'age': 35,

        'name': 'Rochelle Estes',

        'disabled': true,

        'gender': 'female',

        'company': 'EXTRAWEAR',

        'email': 'rochelleestes@extrawear.com',

        'phone': '+1 (849) 408-2029'

    }

];

}

the people component:

    export class PeopleUpdateComponent implements OnInit {

    people$3: Observable<any>;

    selectedPeople3 = ;



    constructor(

        private jhiAlertService: JhiAlertService,

        private dataService: DataService,

        private activatedRoute: ActivatedRoute

    ) {}



    ngOnInit() {

        this.isSaving = false;

        this.people$3 = this.dataService.getPeople();

    }

}

My html code is:

<ng-select

                [items]="people$3 | async"

                bindLabel="name"

                [multiple]="true"

                [disabled]="disable"

                [(ngModel)]="selectedPeople3">

            </ng-select>

Any help is appreciated

I had the same issue as you and I solved it.


This is not an issue related to <ng-select>, but to any library you want to use.

To be able to add any thrid party library, you should follow the way jhipster is doing.

1- Create a module where to add the libraries module in import and export sections

2- Add this module (in import and export sections) to the shared.module.ts module.

A good example is here: https://medium.com/@cyril.casaucau/how-to-add-angular-material-on-an-jhipster-5-x-app-97c9569c9f97

Or simply add the NgSelectModule module to shared-libs.module.ts file.