Как мне переместить иконку с одного тд на другой тд

Question

У меня есть значок в кнопке таблицы.Я хочу переместить этот значок в следующий тд по нажатию кнопки.Я понятия не имею, как это сделать в угловых.

<table border="1px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><i class="fa fa-arrow-right"></i></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 1

Есть много способов, которыми это может быть достигнуто, но самый простой способ сделать это - просто спрятать иконку в одном месте, а шоу - в другом месте.

Для EX:

<table border="1px" (click)="clicked()">
    <tr>

      <td [ngClass]="{'random': counter == 0}">www</td>
      <td [ngClass]="{'random': counter == 1}">www</td>
      <td [ngClass]="{'random': counter == 2}">www</td>
      <td [ngClass]="{'random': counter == 3}">www</td>

    </tr>
    <tr>
        <td>yyyyy</td>
        <td>yyyyy</td>
        <td>yyyyy</td>
        <td>yyyyy</td>
    </tr>
</table>

// In your typescript
  counter = 0;
  clicked() {
    this.counter < 4? this.counter++: this.counter = 0;
  }

//In your css
.random {
  background-color: green;
}

Вы можете играть здесь.