title: change the color of whole row on checkbox checked angular 4
body: <p>how can i make the whole row clickable and also when how to change the row color when i click the checkbox?</p>
  
  <p><strong>here is my html file</strong></p>
  
  <pre><code>&lt;section class="others"&gt;
  &lt;div class="sub-header"&gt;Others&lt;/div&gt;
  &lt;p class="text-center" *ngIf="otherTests.length === 0"&gt;No Tests Available&lt;/p&gt;
  &lt;app-custom-accordion [closeOthers]="true"&gt;
  &lt;ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id=". {{testPanel.Id}}" [title]="testPanel.Name"&gt;
    &lt;ng-template ngbPanelTitle&gt;
      &lt;div class="action-items"&gt;
        &lt;span class="material-icons fav" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel)"&gt;&lt;/span&gt;
        &lt;span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"&gt;&lt;/span&gt;
        &lt;label class="custom-control custom-checkbox"&gt;
          &lt;input type="checkbox" class="custom-control-input" [name]="testPanel.Id + '-' + testPanel.Moniker" [ngModel]="panelIds.indexOf(testPanel.Id) &gt; -1"
          (ngModelChange)="onPanelCheckboxUpdate($event, testPanel)" [id]="testPanel.Id + '-' + testPanel.Moniker"&gt;
          &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/ngb-panel&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>here is my Ts file for checkbox change</strong></p>
  
  <pre><code>onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
  let testPanelIds = panel.Tests.map(test =&gt; test.Id);
  // Wipe any duplicates
  this.panelIds = this.panelIds.filter(
    panelId =&gt; panel.Id !== panelId &amp;&amp; testPanelIds.indexOf(panelId) === -1
  );
  this.selectedPanels = this.selectedPanels.filter(
    selectedPanel =&gt;
      panel.Id !== selectedPanel.Id &amp;&amp;
      testPanelIds.indexOf(selectedPanel.Id) === -1
  );
  
  if ($event) {
    this.panelIds.push(panel.Id);
    this.selectedPanels.push(panel);
     }
    this.updateSession();
  }
  </code></pre>
  
  <p><strong>this is my app-custom-accordion component</strong></p>
  
  <pre><code> &lt;div class="card"&gt;
   &lt;ng-template ngFor let-panel [ngForOf]="panels"&gt;
  &lt;div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + 
   (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
    [class.active]="isOpen(panel.id)"&gt;
    &lt;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"&gt;{{panel.title}}&lt;/a&gt;
    &lt;ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"&gt;&lt;/ng- 
    template&gt;
    &lt;!-- expansion arrows --&gt;
    &lt;div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria- 
    expanded]="isOpen(panel.id)"&gt;
      &lt;span class="material-icons expand"&gt;&lt;/span&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) &amp;&amp; panel.contentTpl"&gt;
    &lt;ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"&gt;&lt;/ng-template&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>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</p>