change class name on click and remove class on other click - Angular 4

Question

Can some one help me to resolve this. I have table with different columns (TD). I want to select one cell and change its classname. when i click on other cell, i want to restore the classname in previously cell and change the classname on newly selected cell.. Please note: each cell have different classname. So i have to keep track of pervious class and selected element. This is Angular 4 application. my table:

<table class="table package-table stats">
            <tbody>
                <tr *ngIf="deptStatsModel.length>0">
                    <th (click)="setStatsActByDept($event,dt2,null)" class="st-th">ORG</th>
                    <th (click)="setStatsActByDept($event,dt2,'OD')" class="OverDue">Over Due</th>
                    <th (click)="setStatsActByDept($event,dt2,'NA')" class="NeedAttention">Need Att</th>
                    <th (click)="setStatsActByDept($event,dt2,'IA')" class="InProgress">In Prog</th>
                    <th (click)="setStatsActByDept($event,dt2,'CP')" class="Comp">Complete</th>
                </tr>
                <tr *ngFor="let model of deptStatsModel">
                    <td (click)="setActivitiesData($event,model, 'all','DPT')">{{model.deptName}}</td>
                    <td (click)="setActivitiesData($event,model, 'OD','DPT')">{{model.overDue}}</td>
                    <td (click)="setActivitiesData($event,model, 'NA','DPT')">{{model.needAtt}}</td>
                    <td (click)="setActivitiesData($event,model, 'IP','DPT')">{{model.inProg}}</td>
                    <td (click)="setActivitiesData($event,model, 'CP','DPT')">{{model.complete}}</td>
                </tr>
                <tr *ngIf="deptStatsModel.length==0">
                    <td style="text-align: left" colspan="5">No records found</td>
                </tr>
            </tbody>
        </table>

I have on click as below:

setStatsActByDept(event,dt,type)
  {

 var target = event.target || event.srcElement || 
 event.currentTarget;

 this.prevDeptCss=target.cloneNode();
 target.className="selected";

  .........
 }

I dont know what to do next..help please.

You're thinking about it in the wrong way. The code shouldn't modify the DOM. It should modify the state of the component. The template is the one responsible to apply CSS classes to DOM elements based on the state of the component. What does your table look like? What does it display and how? Post your code. — JB Nizet
– JB Nizet, Commented May 6, 2017 at 12:28
see table code please. When you click on one cell make it selected. Remove selected from it and add to other cell on click — leo
– leo, Commented May 6, 2017 at 12:34
refer this, stackoverflow.com/a/61986255/11384233 I think this will be helpful. — Tharindu Lakshan
– Tharindu Lakshan, Commented Apr 27, 2021 at 15:31

JB Nizet · Accepted Answer · 2017-05-06 13:02:46Z

1

You're thinking about it in the wrong way. The code shouldn't modify the DOM. It should modify the state of the component. The template is the one responsible to apply CSS classes to DOM elements based on the state of the component.

Assuming, as your code seems to imply, that you want to select the header cells. Your code should simply look like the following.

In your component:

public selectedHeader: string;

In your view:

<th (click)="selectedHeader = 'ORG'" [ngClass]="selectedHeader === 'ORG' ? 'selected' : 'st-th'">ORG</th>
<th (click)="selectedHeader = 'OverDue'" [ngClass]="selectedHeader === 'OverDue' ? 'selected' : 'OverDue'">Over Due</th>
...

edited May 6, 2017 at 13:02

answered May 6, 2017 at 12:44

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leo Over a year ago

Sound reasonable. Thank you for your time.

Collectives™ on Stack Overflow

change class name on click and remove class on other click - Angular 4

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related