Checkbox click function is not working angular 4

Question

I have this data coming from another component on the basis of active tag when row is clicked I am pushing Id to ngModel of checkbox input field. Row click is working fine and checkbox is adding/removing data but now when I click on checkbox itself it doesn't do anything like checkbox click function is not working How can I solve that?

html component

<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests; let i = index;" id="{{testPanel.Id}}" [title]="testPanel.Name">
  <ng-template ngbPanelTitle>
    <div class="action-items">
      <label class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            [name]="testPanel.Id + '-' + testPanel.Moniker"
            [ngModel]="panelIds.indexOf(testPanel.Id) > -1"
            (ngModelChange)="onPanelCheckboxUpdate($event, testPanel)"
            [id]="testPanel.Id + '-' + testPanel.Moniker">
          <span class="custom-control-indicator"></span>
      </label>
    </div>
  </ng-template>
</ngb-panel>

ts component

getting Id from service and push it on basis of row click

this.testOrderService.refreshRequestsObservable().subscribe(
  data => {

    this.panelActive = data.active;
    let testFilteredArray = lodash.filter(this.otherTests, item => item.Id === data.id);

    if (this.panelActive) {
      // is checked
      this.panelIds.push(data.id);
      if(testFilteredArray.length > 0){
        this.selectedPanels.push(testFilteredArray[0]);
      }
    }
    else {
      //is false
      this.panelIds = this.panelIds.filter(obj => obj !== data.id);
      this.selectedPanels = this.selectedPanels.filter(obj => obj.Id !== data.id);
    }

    // this.panelIds = lodash.uniq(this.panelIds);
    this.selectedPanels = lodash.uniqBy(this.selectedPanels, "Id");

    this.updateSession();

  }
)

checkbox function

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
  panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
  selectedPanel =>
    panel.Id !== selectedPanel.Id &&
    testPanelIds.indexOf(selectedPanel.Id) === -1
);

if ($event) {
  this.panelIds.push(panel.Id);
  this.selectedPanels.push(panel);
 }
 this.updateSession();
 }

This checkbox function is not working and wont let me change the value of checkbox.

And also is there any way of adding click function in ngbPanel tag? Any help? Thanks

Is it going to the method you are calling? – Naveen Motwani - AIS May 27 '19 at 09:27 — Naveen Motwani - AIS, May 27 '19 at 09:27

score 0 · Answer 1 · answered May 27 '19 at 10:01

If you want to achieve two way data binding , use below code.

In foo.html

<input [(ngModel)]="checBxFlag" type="checkbox"/>

In App.module.ts import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

If you want fire event click of check box ,use (onClick)="somemethod()" in your foo.html file and define method in foo.ts file.

Checkbox click function is not working angular 4

1 Answers1