How to pass ngFor index in ngClass

Asked

Viewed 324 times

2

I’m trying to pass the index of ngFor within the ngClass to activate the correct class. I have tried several ways, but could not.

Follows the code:

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-1-active' : classFocus.col1 , 'col-tb-1' : !classFocus.col1}">{{ cell.value }}</td>

In this case, where there is "1" I want to exchange for index. would be something like:

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-i-active' : classFocus.coli , 'col-tb-i' : !classFocus.coli}">{{ cell.value }}</td>
angular

1 answer

2

You just need to concatenate using the +:

<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-' + i + '-active' : 'classFocus.col' + i , 'col-tb-' + i : !'classFocus.col'+ i}">{{ cell.value }}</td>

I made an example at codesandbox.io

  • I tried that way, but it didn’t work.

  • @Bruno see me example added the answer!

  • In the example it worked. However, there is no ngClass condition like the one I posted. I believe the problem is there. I’m not at work anymore, anything I can send a print of the bugs tomorrow. Thanks for the feedback and the layout!

  • @Bruno for nothing, my idea is to show you how to do, if there is some error in the code is difficult to identify because completely as is your system, understand?

  • I totally understand. By the example you posted, I tried to change it to [ngClass]="{'col-tb-' + i + '-active' i > 0 , 'col-tb-' + i : i < 0}" That way it would be more or less the way I needed it, but it didn’t work there either. Maybe you’re screwing up, I don’t know.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.