#change class of a child when clicked

15 messages · Page 1 of 1 (latest)

turbid canopy
#

i'm surprised i didn't need to do such a thing before, but when i did it made me realize what's the angular way of doing this?

#

in this example the <th> click needs to change the class of the <i>

<ng-container cdkColumnDef="firstName">
    <th cdk-header-cell *cdkHeaderCellDef (click)="adjustSort('firstName')">
      First name
      <i class="bi bi-sort-alpha-down"></i>
    </th>
    <td cdk-cell *cdkCellDef="let user">{{ user.firstName }}</td>
  </ng-container>

i'm using the angular cdk table here but that's beside my point

signal latch
#

<i> is not child of <td>

turbid canopy
signal latch
#

in the title, yes.

turbid canopy
#

<i> is child of <th> right?

signal latch
#

but you're asking about click on td.

turbid canopy
#

omfg

#

my mistake for that typo

turbid canopy
signal latch
#

Since they're both part of the same view, the simplest solution would be to put a property in the component, bind it to an ngClass for <i>, and change its value with <th>'s (click) output.

#

or you could do that with pure css.

turbid canopy
#

with pure css?
how would that even work?

turbid canopy
# signal latch Since they're both part of the same view, the simplest solution would be to put ...

the code i posted is a sample of the cdk table

how do i make sure only the <i> inside is targeted? and not a diffrent one?

<ng-container cdkColumnDef="firstName">
    <th cdk-header-cell *cdkHeaderCellDef (click)="adjustSort('firstName')">
      First name
      <i class="bi bi-sort-alpha-down"></i>
    </th>
    <td cdk-cell *cdkCellDef="let user">{{ user.firstName }}</td>
  </ng-container>

<ng-container cdkColumnDef="firstName">
    <th cdk-header-cell *cdkHeaderCellDef (click)="adjustSort('lastName')">
      First name
      <i class="bi bi-sort-alpha-down"></i>
    </th>
    <td cdk-cell *cdkCellDef="let user">{{ user.lastName}}</td>
  </ng-container>
turbid canopy