How to add angular2-select in each row of table in angular2.Each row having checkbox.

Question

I added the checkbox in each row of table and each row having angular2 select also.I checked the first and second row.Then I select from first row's angular2 select.I want the selected option of first row should updated to all checked row angular2 select.But it is not updating the select checked row angular2 select.

I checked two rows and select "kray" value of first ng-select but it is not updating the second row ng-select.The second ng-selct selected value should be "kray"

Please help me.

Here is my code

<tbody class="set-font">
    <tr [class.info]="tr.status" 
      *ngFor="let tr of activeTabData let i = index" class="tros-auditors">
      <td scope="row"> 
        <input type="checkbox" value={{tr.id}} 
            class="checkedauditors"
            id={{tr.checkboxId}}
            (click)="toggleCheck(tr,i)"
            [(ngModel)]="tr.status"
            ></td>
            <td>{{tr.clientCode}}</td>
            <td>{{tr.carrierCode}}</td>
            <td><div><my-date-picker [options]="myDatePickerOptions" id={{i}} 
                (dateChanged)="onDateChanged($event)"
                [selDate]="selectedDate"
                >
                </my-date-picker>
              </div>
      </td>
      <td [formGroup]="form">
        <ng-select id={{i}}
          [options]="optss" 
          placeholder="{{tr.assignee}}" 
          formControlName="selectSingle" 
          (opened)="onSingleOpened1(i)" 
          (closed)="onSingleClosed1()" 
          (selected)="onSingleSelectedManager1($event,i)"
           [(ngModel)]="hideSelectedAuditor"
          (deselected)="onSingleDeselected($event)">
        </ng-select>
      </td>
    </tr>
  </tbody>

The JSON

{
    [{
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "11/11/2016",
        "assignee": "Flansdon",
    }, {
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "05/29/2017",
        "assignee": "Flansdon"
    },{
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "06/01/2017",
        "assignee": "Flansdon"
    }],
}

mydata.ts file below

  onSingleSelectedManager1(item,index) {
    console.log("This is Index",index);
    for(let i=0;i<this.checkedArray.length;i++){
      this.checkedArray[i].assignee = item.label;
    }
  }

Markus Hausdorf · Accepted Answer · 2017-05-31 06:42:47Z

for this input you should use nested componenst.

In this component you should give the data back to the parent component by a click event.

i set up a little app to show you what i mean

test.component.ts (parent)

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
data: any= 
    [{
        "ID":1,
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "11/11/2016",
        "assignee": "Flansdon",
    }, {
        "ID":2,
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "05/29/2017",
        "assignee": "Flansdon"
    },{
        "ID":3,
        "clientCode": "NIKE",
        "carrierCode": "FDE",
        "auditDeadlineDate": "06/01/2017",
        "assignee": "Flansdon"
    }]


   constructor(){}

  ngOnInit() {

  }

  Output(event){
      console.log(event)
  }

}

test.component.html

    <tr *ngFor="let tr of data">
  <td>{{tr.clientCode}}</td>
  <td>{{assignee}}</td>
  <td>
    <app-count [id]="tr.ID" (output)='Output($event)'></app-count>
      </td>
</tr>

count.component.ts (child)

    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-count',
  templateUrl: './count.component.html',
  styleUrls: ['./count.component.css']
})
export class CountComponent implements OnInit {
  @Input() id: any
  @Output() output: EventEmitter<any> = new EventEmitter<any>()

  count: any
  constructor() { }

  ngOnInit() {
    console.log(this.id)
  }
  onClick(id) {
    var o: any = { id: id, count: this.count }
    this.output.emit(o)

  }
}

count.component.html

    <select [(ngModel)]="count" (click)='onClick(id)'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

so in this case you will get back an object with ID and the select choice.

in the function Output you can do the magic

you can also read this article about nested components

Nested Components

Hi Markus could you update above with <ng-select></ng-select>.I am using <ng-select></ng-select>.I am not using <select></select>.

Markus Hausdorf · Accepted Answer · 2017-06-01 05:16:17Z

1

html:

<ng-select [(ngModel)]="count" (click)='onClick(id)'
  [options]="optss">
</ng-select>

ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-count',
  templateUrl: './count.component.html',
  styleUrls: ['./count.component.css']
})
export class CountComponent implements OnInit {
  @Input() id: any
  @Output() output: EventEmitter<any> = new EventEmitter<any>()

  count: any
  optss: any[] = [
    { value: 'test1', label: 'test1' },
    { value: 'test2', label: 'test2' },
    { value: 'test3', label: 'test3' }
  ]


  constructor() { }

  ngOnInit() { }

  onClick(id) {
    var o: any = { id: id, count: this.count }
    this.output.emit(o)

  }
}

answered Jun 1, 2017 at 5:16

Markus Hausdorf

1311 silver badge3 bronze badges

1 Comment

Mohit Over a year ago

I want a checkbox in each roe of table.If user check the first two row's checkbox and then select from first row ng-select then it will update the selected value of checked row.

Collectives™ on Stack Overflow

How to add angular2-select in each row of table in angular2.Each row having checkbox.

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related