CODEWITHSUNDEEP
angular
Petar
Petar

Reputation: 149

How can I get the attribute values in component HTML?

I am having table where on click I am making sorting.I have directive attached to it and I am changing dynamically the attribute data-order="desc" on click so it could be asc or desc. It is changed on table header click.

  <th scope="col" [appSort]="dataSource$" (sortObservableEmitter)="test($event)" data-order="desc" data-name="firstname">first name
       
 </th>

Now i want to show arrows on my table - when it is ascending i want to show the arrow up font awesome icon. When data-order is changed to desc i want to show the arrow down font icon.

But when I try for example

 <th scope="col" [appSort]="dataSource$" (sortObservableEmitter)="test($event)" data-order="desc" data-name="firstname">first name
        <i *ngIf="data-order == 'asc'" class="fas fa-arrow-up"></i>
 </th>

it is not working.

How can I get here in my ngIf directive the value of data-order?

Upvotes: 0

Views: 199

Answers (1)

Eliseo
Eliseo

Reputation: 57939

In a directive you can indicate the "exportAs", see e.g. this link

So if your directive is like

@Directive({
 selector: '[appSort]',
 exportAs: 'appSort' //<--add this line
})
....
//I imagine you has a variable sortDirection
sortDirection:string=null;

you can access to the variables public (by defect in Angular all the variables are public) of the directive using a template reference variable

If I imagine that has a variable that is called e.g. sortDirection you can write

<th scope="col" [appSort]="dataSource$" #colFirstName="appSort"...>first name
        <i *ngIf="colFirstName.sortDirection == 'asc'" class="fas fa-arrow-up"></i>
 </th>

NOTE: Instead two *ngIf, I prefer use ngClass in the way

        <i [ngClass]="colFirstName.sortDirection=='asc'?'fas fa-arrow-up':
                      colFirstName.sortDirection=='desc'?'fas fa-arrow-down':null"></i>

Upvotes: 1

Related Questions