CODEWITHSUNDEEP
javascripthtmlangulartypescript
user10796734
user10796734

Reputation:

how to make the whole row clickable and change the color angular 4

how can i make the whole row clickable and also when how to change the row color when i click the checkbox?

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" id=". {{testPanel.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>

here is my Ts file for checkbox change

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 is my app-custom-accordion component

 <div class="card">
 <ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.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">{{panel.title}}</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="{{panel.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

Upvotes: 0

Views: 373

Answers (1)

Thanthu
Thanthu

Reputation: 5058

You can make whole row clickable with (click):

Example:

<div (click)="someFunction()"></div>

Makes the div clickable

To change color based on value of a checkbox you can enable and disable a class that applies color to the element like shown below:

<div [className]="valueOfCheckBox? 'example-class' : 'other-class'"></div>

In the above code the valueOfCheckBox will be the value of your check-box and example-class can be the class with color when it is checked and other-class can be class with color to show when it is unchecked.

You can also do the same with style like shown below:

<div [style.color]="valueOfCheckBox ? 'blue' : 'green'"></div>

Upvotes: 1

Related Questions