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;
    }
  }

score 1 · Answer 1 · answered May 31 '17 at 06:42

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 .I am using .I am not using . — Mohit, Jun 01 '17 at 03:57

score 1 · Answer 2 · answered Jun 01 '17 at 05:16

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)

  }
}

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. — Mohit, Jun 03 '17 at 06:13

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

2 Answers2