CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Nazir
Nazir

Reputation: 414

Highlight the Angular Table Cells that have been edited

I have an Table in an Angular application that shows various hours in a month and the user can edit those hours. They can edit multiple hours in a go.

I need to find a way where whichever table cell is edited, that gets highlighted and stays that way, probably add a css class to that cell.

I tried using classList but did not work, failed with ngClass as well. Please help !

Table : enter image description here

HTML -

  <tbody>
    <tr *ngFor="let emp of tableData index as index"
        <td class="hoursAlignment" *ngIf="editingHours(index, j)"
          [ngClass]="{'changeBorder':(changBorder === true)}">
          <input style="width:40px;height:25px;" class="editingHour" type="text"
            [(ngModel)]="emp['allocationHours'][attribute.key]['workHours']"
            (change)="getHours($event)"">
        </td>
    </tr>
  </tbody>

TS -

  getHours($event) {
    console.log($event );
    if (! $event.target.classList.contains('editedHours')) {
      console.log("entered classlist");
      $event.target.classList.add('editedHours')
    }
  }

CSS 

.editedHour{
    border-color: green;
}

Upvotes: 2

Views: 591

Answers (2)

KyleElyk92
KyleElyk92

Reputation: 9

In your HTML, set your [ngStyle] to call a method that returns an object formatted to your desired styles.

<p [ngStyle]="getStyles()"></p>

getStyles(){
 return {
   'background-color': 'rebeccapurple',
   'color': 'seashell'
 }
}

Upvotes: 1

Aish Anu
Aish Anu

Reputation: 1612

Hope this helps...

app.component.ts

usersList: User[] = [
 {name: 'AAA', email: '[email protected]', place: 'Mysore'},
 {name: 'BBB', email: '[email protected]', place: 'Bangalore'},
 {name: 'CCC', email: '[email protected]', place: 'Maddur'},
];

getStatus(form, index) {    
  if(form.form.controls && form.form.controls[`name${index}`]) {
   if(form.form.controls[`name${index}`].dirty || 
    form.form.controls[`email${index}`].dirty || 
     form.form.controls[`place${index}`].dirty) {
      return 'gold';
   }
 }
}

onChange(form) {
 console.log(form.form.controls);    
}

app.component.html

<div class="container">
 <form class="text-center" #form="ngForm">
   <table class="table">
     <thead>
       <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Place</th>
       </tr>
    </thead>
  <tbody>
    <tr *ngFor="let user of usersList; let i = index" style="margin-bottom: 20px;" 
      [style.background-color]="getStatus(form, i)">
      <td>
        <input class="form-control" name="name{{i}}" [(ngModel)]="user.name" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="email{{i}}" [(ngModel)]="user.email" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="place{{i}}" [(ngModel)]="user.place" (change)="onChange(form)">
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions