Change sorting icon after sorting

[pratiksha-chandel]

Hello There ,
I want to change icon on sorting .
1] As sending sorting will show ascending arrow .
2] As descending sorting will show descending arrow .
3] For filter data filter icon will display .
How can I do with this.
I have tried with this solution but not working fro me

import {Component, Input} from "@angular/core";
import {DataTable, SortEvent} from "angular2-datatable";

@component({
selector: 'mySorter',
template: <a style="cursor: pointer" (click)="sort()" class="text-nowrap"> <ng-content></ng-content> <span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> <span *ngIf="!isSortedByMeAsc && !isSortedByMeDesc" class="glyphicon glyphicon-sort" aria-hidden="true"></span> </a>
})
export class MySorterComponent implements ngOnInit {
@input("by") sortBy: string;
isSortedByMeAsc: boolean = false;
isSortedByMeDesc: boolean = false;

public constructor(private mfTable: DataTable) {
}

public ngOnInit(): void {
    this.mfTable.onSortChange.subscribe((event: SortEvent) => {
        this.isSortedByMeAsc = (event.sortBy == this.sortBy && event.sortOrder == "asc");
        this.isSortedByMeDesc = (event.sortBy == this.sortBy && event.sortOrder == "desc");
    });
}

sort() {
    if (this.isSortedByMeAsc) {
        this.mfTable.setSort(this.sortBy, "desc");
    } else {
        this.mfTable.setSort(this.sortBy, "asc");
    }
}

}

Facing error : mfTable not a member of -- component .
this.mfTable.onSortChange : not a component member
this.mfTable.setSort(this.sortBy, "desc"); : not a component member and supplied parameter not match .

Any other solution for that? help please !

[pratiksha-chandel]

Facing this issue in console and data is not loading.