2 Way data binding not working in ng-select Angular 6

Question

I am using ng-select in my application.

My component class is

export class ExampleComponent {
     selectedCoursesList: Course[] = [];
     courseList: any[] = [];

     removeCourse( course: Course) {
         this.selectedCoursesList.forEach((item, index) => { 
          if (item === course) { 
                this.selectedCoursesList.splice(index, 1);          
          }
        });
    }
 }

and my html is

     <ng-select  placeholder="Choose course" [multiple]="true" 
        (ngModelChange)="updatecourse($event);" 
        [(ngModel)]="selectedCoursesList">
        <ng-option *ngFor="let course of courseList" [value]="course" >
                    {‌{course.name}} 
        </ng-option>
     </ng-select>

Here I want to achieve 2 things

Un-selecting particular selected values of ng-select
2 way Data binding

Can any one tell me what I did wrong?

Thank You

I am not getting any error. I am using selectedCourseList in html as {{ selectedCoursesList }} . It's not removing course object. — Gopikrishn Imadabathuni, Jul 25 '18 at 02:49
Your template is not working? Can you update code in `stackblitz.com` — Sanoj_V, Jul 25 '18 at 05:22
Ofcourse by using {{selectedCoursesList }}, it won't remove Course[] as it is the component Property and is directly binded to the corresponding template. Thus, You have a non-working Template/HTML . If you use "{{selectedCoursesList }}", it will also give error — Jitendra Ahuja, Jul 25 '18 at 07:38
@JitendraAhuja, 1. Initially my selectedCoursesList is empty 2. When I select a course from ng-select multiple => selectedCoursesList has one object 3. when I select second course from select list it has two objects. when ever you select a course I am calling ` ` 4. In the child component I have a button to remove course from the list. — Gopikrishn Imadabathuni, Jul 25 '18 at 23:17

score 0 · Answer 1 · answered Jul 26 '18 at 06:36

I achieved this by adding [formControl]="courses" in my

     <ng-select  [formControl]="courses" placeholder="Choose course" [multiple]="true" 
         [(ngModel)]="selectedCoursesList">
            <ng-option *ngFor="let course of courseList" [value]="course" >
                {‌{course.name}} 
            </ng-option>
      </ng-select>

and in my removeCourse method I added

this.courses.setValue(this.selectedWinaryList);

 export class ExampleComponent {
    selectedCoursesList: Course[] = [];
    courseList: any[] = [];
    courses= new FormControl();
    removeCourse( course: Course) {
         this.selectedCoursesList.forEach((item, index) => { 
             if (item === course) { 
                 this.selectedCoursesList.splice(index, 1);          
             }
         });
         this.courses.setValue(this.selectedWinaryList);
     }
 }

when I remove course from the array it automatically un-selecting that course from the select list.

Your proposal is deprecated in Angular v6 and will be removed in v7. https://angular.io/api/forms/FormControlDirective#use-with-ngmodel — PEL, Aug 23 '18 at 12:08

Stefan Morcodeanu · Answer 2 · 2019-03-28T18:06:25.887

first of all you should use ngselect like this

<ng-select class="custom" placeholder="Select type of Faq Post"
   [(ngModel)]="selectedType"
   [items]="mapedData"
   bindLabel="value"
   bindValue="key"
   (change)="dataModelChanged()">
 </ng-select>

and ngselector automatically will bind value so you don't need to use ng-option to do that. Also ngSelect have change method which is output event emitter.

 dataModelChanged() {
    console.log(this.selectedType);
  }

Now on every value change of ngselector you will have value of the ngModel which will be stored in selectedType

score 0 · Answer 3 · answered Aug 28 '21 at 08:36

Use (change) event from html like below

  <ng-select [items] = "arrobjCategories"  bindLabel = "name"
bindValue = "id" [(ngModel)] = "selectedProductCategoryId"
(change) = "onProductCategoryChange($event)"> </ng-select>

Use the change event in type script file like below

  public onProductCategoryChange(event){
    console.log(event);
  }

Here event will contain actual selected data.

2 Way data binding not working in ng-select Angular 6

3 Answers3