How to show column arrow icon based on Dropdown selection in angular 6?

Kindly see the below picture, there is a drop-down button called sort where all the headers are there.if i select any of the header it should display up and down arrow.now its displaying in all the headers.

<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[1].value">{{HeaderData[1].text}}</th>
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[4].value">{{HeaderData[4].text}}</th>
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[3].value">{{HeaderData[3].text}}</th>             
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[5].value">{{HeaderData[5].text}}</th>

Here [sortable]="true" gives me both up and down arrow icon.so how can show that icon based on selection instead of displaying at all headers.

You could swap out the <th> with an ngIf based on the value of the dropdown.

<th *ngIf="sortSelectValue != HeaderData[1].text" abs-table-header>{{HeaderData[1].text}}</th>
<th *ngIf="sortSelectValue == HeaderData[1].text" abs-table-header [sortable]="true" [sortableContent]="HeaderData[1].value">{{HeaderData[1].text}}</th>