How to set the selected value of the ng2-select

Question

I am working on angular2 application, I have use the ng2-select for the multiselect dropdown. Its working fine while creating new entry. But when trying to implement same while editing I am not able to set the default selected values pulled form database.

  <ng-select [initData]="aminities" (data)="refreshValue($event)" [multiple]="true" [items]="items" [disabled]="disabled"></ng-select>


export class EditProjectComponent {
    project: ProjectModel;
    routeParam: RouteParams;
    aminities: any;
    private items: Array<string> = ['Swimming Pool', 'Gymnasium', 'Lift', 'Power Backup',
        'Landscaped Garden', 'Security', 'Community Hall', 'Jogging Track', 'Childrens Play Area'];
    constructor(
        @Inject(Router) private router: Router,
        @Inject(ProjectService) private projectService: ProjectService,
        routeParam: RouteParams,
        private _formBuilder: FormBuilder
    ) {

        this.project = new ProjectModel();
        this.routeParam = routeParam;
        if (this.routeParam.params['id'] != undefined) {
            this.projectService.getbyId(this.routeParam.params['id'], (res) => {
                this.project = res;
                this.aminities = this.project.overview.aminities;

            }, () => { });
        }
    }

  }

After response came i have to set the aminities values in ng2-select.

Please correct me how to set the default selected values.

Answer 1

If you want to select all the aminities after they come back from the response you can trigger it by pushing them to active.

This is the only way I found to do it. There's certainly a better option.

First we add the select as view children.

import {Select} from 'your-location';

export class EditProjectComponent {
    //...

    @ViewChild(Select)
    private select: Select;

    //...
}

(If you have more then 1 then use @viewChildren and QueryList<>)

After that, we first find the options that are selected from the itemObjects.

let arr = [];
arr = this.select.itemObjects.filter((x) => {
   let isAminities = this.aminities.find((y) => y.text === x.text);
   return (isAminities !== -1) ? true: false;
})

Now that we have arr with all the items we need we just push it to the select active list.

this.select.active.push(arr)

The end result:

export class EditProjectComponent {
    project: ProjectModel;
    routeParam: RouteParams;
    aminities: any;

    @ViewChild(Select)
    private select: Select;

    private items: Array<string> = ['Swimming Pool', 'Gymnasium', 'Lift', 'Power Backup',
        'Landscaped Garden', 'Security', 'Community Hall', 'Jogging Track', 'Childrens Play Area'];
    constructor(
        @Inject(Router) private router: Router,
        @Inject(ProjectService) private projectService: ProjectService,
        routeParam: RouteParams,
        private _formBuilder: FormBuilder
    ) {

        this.project = new ProjectModel();
        this.routeParam = routeParam;
        if (this.routeParam.params['id'] != undefined) {
            this.projectService.getbyId(this.routeParam.params['id'], (res) => {
                this.project = res;
                this.aminities = this.project.overview.aminities;
                let arr = [];
                arr = this.select.itemObjects.filter((x) => {
                   let isAminities = this.aminities.find((y) => y === x.text);
                   return (isAminities !== -1) ? true: false;
                })
                this.select.active.push(arr)

            }, () => { });
        }
    }

  }

I know there will be other options to do this. But so far that's the only one I was able to work with.