Arrow doesn't change direction on first click

I am using Angular Material UI's HTTP table to render content from the DB and I am experiencing this weird bug.



Initially when the page loads, the direction of this arrow is being always to the top. So it's behavior should be, when I click it, the arrow should point down, and sort the data accordingly. For the first time when I click it, The arrow is still pointing up and the data below is being sorted. And for the second time when i click it, the arrow is changing and the data is getting sorted again.

Did anyone face this bug? Heads up will be appreciated.

Here are the code snippets.

components.ts

ngAfterViewInit() {
this.dataSource.sort = this.sort;
// this.sort.direction = 'desc';
this.sort.sortChange.subscribe((sortEvent) => {
console.log("Sort Event: ", sortEvent)
this.sortBy = sortEvent.active;
this.sortOrder = sortEvent.direction || "desc";
// this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
this.page = 1;
this.getDocumentTypes();
});
}


components.html

<ng-container matColumnDef="documentTypeDisplayValue">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Document Type</th>
<td
mat-cell
*matCellDef="let element"
[matTooltip]="element.documentTypeId"
>
<ng-container *ngIf="element.isEditable; else viewMode">
<mat-form-field class="editable-input">
<input matInput [(ngModel)]="element.documentTypeDisplayValue" />
</mat-form-field>
</ng-container>
<ng-template #viewMode>{{
element.documentTypeDisplayValue
}}</ng-template>
</td>
</ng-container>


components.scss

.mat-sort-header-arrow {
color: white;
opacity: 1 !important;
visibility: visible;
}


I tried solving this with CSS and JS both ends but didn't work out.

Continue reading...