Hide/show an element by using HTML attribute as condition in Angular-CodePudding

I have one ng-template that is being reused as table headers.

<ng-template
  let-table="table"
  let-column="column"
  let-label="label"
  #tableHeaderTemplate
>
  <th [appSort]="table" sort-order="" [attr.sort-key]="column">
    <div>
      <span>{{ label }}</span>
      <span> (asc) </span>
      <span> (desc) </span>
    </div>
  </th>
</ng-template>

On clicking of the column header the table's data is sorted. I need to show (asc) or (desc) besides the column based on the attribute sort-order.

Check sample of my code below :

https://stackblitz.com/edit/angular-ivy-ijcuy3?file=src/app/app.component.html

CodePudding user response：

You can use [hidden] attribute to hide your element and get value of sort-key attr by specifying an Identifier to your table header.

  <th #tableHeader [appSort]="table" sort-order="" [attr.sort-key]="column">
    <div>
      <span>{{ label }}</span>
      <span [hidden]="tableHeader.getAttribute('sort-order') !== 'asc'"> (asc) </span>
      <span [hidden]="tableHeader.getAttribute('sort-order') !== 'desc'"> (desc) </span>
    </div>
  </th>
</ng-template>