title: change class name on click and remove class on other click - Angular 4
body: <p>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:</p>
  
  <pre><code>&lt;table class="table package-table stats"&gt;
              &lt;tbody&gt;
                  &lt;tr *ngIf="deptStatsModel.length&gt;0"&gt;
                      &lt;th (click)="setStatsActByDept($event,dt2,null)" class="st-th"&gt;ORG&lt;/th&gt;
                      &lt;th (click)="setStatsActByDept($event,dt2,'OD')" class="OverDue"&gt;Over Due&lt;/th&gt;
                      &lt;th (click)="setStatsActByDept($event,dt2,'NA')" class="NeedAttention"&gt;Need Att&lt;/th&gt;
                      &lt;th (click)="setStatsActByDept($event,dt2,'IA')" class="InProgress"&gt;In Prog&lt;/th&gt;
                      &lt;th (click)="setStatsActByDept($event,dt2,'CP')" class="Comp"&gt;Complete&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr *ngFor="let model of deptStatsModel"&gt;
                      &lt;td (click)="setActivitiesData($event,model, 'all','DPT')"&gt;{{model.deptName}}&lt;/td&gt;
                      &lt;td (click)="setActivitiesData($event,model, 'OD','DPT')"&gt;{{model.overDue}}&lt;/td&gt;
                      &lt;td (click)="setActivitiesData($event,model, 'NA','DPT')"&gt;{{model.needAtt}}&lt;/td&gt;
                      &lt;td (click)="setActivitiesData($event,model, 'IP','DPT')"&gt;{{model.inProg}}&lt;/td&gt;
                      &lt;td (click)="setActivitiesData($event,model, 'CP','DPT')"&gt;{{model.complete}}&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr *ngIf="deptStatsModel.length==0"&gt;
                      &lt;td style="text-align: left" colspan="5"&gt;No records found&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>I have on click as below:</p>
  
  <pre><code>setStatsActByDept(event,dt,type)
    {
  
   var target = event.target || event.srcElement || 
   event.currentTarget;
  
   this.prevDeptCss=target.cloneNode();
   target.className="selected";
  
    .........
   }
  </code></pre>
  
  <p>I dont know what to do next..help please.</p>