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%2Fapp%2Fapp.component.html
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>