CODEWITHSUNDEEP
angularangular2-template
Adrien Castagliola
Adrien Castagliola

Reputation: 921

Add class to one particular row in Angular 2

I have a tab with several rows, i just want to add class to the current row when i click on my delete component. My delete component return the id of the row i want to delete.

My problem is, i don't know how to add class to the current row (using the id I suppose)

Here is what my codes look like :

users.tempate.html :

<tr *ngFor="let user of users" id="{{user.user_id}}">
         <td>
             <span>{{user.user_id}}</span>
        </td>
        <td>
             <delete (deleteUser)="deleteUser($event)"></delete>
        </td>
    </tr>

users.component.ts :

export class Users(){
 isDeleted = false;
 constructor(){}
  deleteUser(user_id){
      this.isDeleted = true;
  } 
}

Any ideas ?

Upvotes: 2

Views: 1903

Answers (2)

Abhisek Mishra
Abhisek Mishra

Reputation: 269

You can add the following condition in you template to add "className" class.

<tr *ngFor="let user of users" id="{{user.user_id}}">
     <td>
         <span>{{user.user_id}}</span>
    </td>
    <td>
         <delete (deleteUser)="deleteUser(user.user_id)" [class.className]="isDeleted"></delete>
    </td>
</tr>

Upvotes: 0

Maximilian Riegler
Maximilian Riegler

Reputation: 23516

In your HTML add a template variable for the row and pass it in the method:

<tr *ngFor="let user of users" id="{{user.user_id}}" #row>
     <td>
         <span>{{user.user_id}}</span>
    </td>
    <td>
         <delete (deleteUser)="deleteUser(user.user_id, row)"></delete>
    </td>
</tr>

And in your method you can now add that class:

deleteUser(user_id, row){
    this.isDeleted = true;
    row.classList.add("deleted");
}

Plunker for example usage

Upvotes: 3

Related Questions