Как удалить HTML-элемент из столбца таблицы после нажатия на другой столбец

Question

Я сделал директиву для отображения значка в строке заголовка таблицы при сортировке по убыванию или по возрастанию.Теперь проблема в том, что значок остается активным при попытке сортировки другого столбца.сейчас я использую hostListener () для события onclick.

<thead>
      <tr>
        <th appSortIcon *ngFor="let head of headElements; let i = index" scope="col" [mdbTableSort]="elements" [sortBy]="headElements[i]">{{head | AddSpaceBeforeCapitalLetter | titlecase}}</th>
      </tr>

  @HostListener('click') onClick() {
    this.setSortIconInHostElement();
  }
    const contentForNewIcon = this.renderer.createElement('img');
    this.renderer.addClass(contentForNewIcon, this.elementClassTable);
    this.renderer.setAttribute(contentForNewIcon, 'src', this.currentlySortedByAttribute.value === 'ascending' ? 'assets\\ascIcon.png' : 'assets\\descIcon.png');
}