check the checkbox when row is clicked angular 4

I tried everything but cannot get the desired answer. How can i make the whole row clickable and when i click checbox should be checked and row should be active any idea

Here is my html file

<section class="others" >
<div class="sub-header">Others</div>
<p class="text-center" *ngIf="otherTests.length === 0">No Tests Available</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests let i = index;" id="" [title]="testPanel.Name">
  <ng-template ngbPanelTitle>
    <div class="action-items">
      <span class="material-icons fav" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel)"></span>
      <span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
      <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>
  </app-custom-accordion>
 </section>

this is my panel

Here is my Ts file for checkbox change

public panelIds: Array<number>;

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
this.checked = $event
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 is my app-custom-accordion component

 <div class="card">
 <ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="-header" [class]="'card-header ' + 
 (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
  [class.active]="isOpen(panel.id)">
  <a href (click)="!!toggle(panel.id)" [attr.tabindex]=" . 
 (panel.disabled 
  ? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
    [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)" 
 [attr.aria-disabled]="panel.disabled"></a>
  <ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng- 
  template>
  <!-- expansion arrows -->
  <div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria- 
  expanded]="isOpen(panel.id)">
    <span class="material-icons expand"></span>
  </div>

 </div>
 <div id="" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
  <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
      </div>
    </ng-template>
  </div>

How to change the color of whole row when click on checkbox like when checkbox is selected the whole row should be dark or whatever and when unchecked should go to previous color i.e white can anyone help? thanks