Incorporating mat sort in two different components using the same approach has led to a discrepancy. It functions perfectly in one component, but fails to work in another due to an unknown reason. Despite ensuring that all properties are consistent and two of them adhere to the correct format, those specific columns remain unsorted.
Below is the code snippet
HTML code
<!-- <section class="content-header">
<div class="container-fluid">
<h1>Patient Listing</h1>
</div>
</section> -->
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="dateRangeFormGroup" [rangePicker]="picker" >
<input matStartDate formControlName="start" placeholder="Start date" [disabled]="true">
<input matEndDate formControlName="end" placeholder="End date" [disabled]="true">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker disabled="false">
<mat-date-range-picker-actions>
<button mat-button matDateRangePickerCancel>Cancel</button>
<button mat-raised-button color="primary" matDateRangePickerApply (click)="onDateRangeApply()">Apply</button>
</mat-date-range-picker-actions>
</mat-date-range-picker>
<mat-error *ngIf="dateRangeFormGroup.get('start').hasError('matStartDateInvalid')">Invalid start date
</mat-error>
<mat-error *ngIf="dateRangeFormGroup.get('end').hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Search</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Anything" #input>
</mat-form-field>
<button class="float-right add-record-btn" mat-raised-button color="primary" (click)="onRecordEdit()">Add
Record</button>
<!-- Table Structure Here -->
TypeScript (ts) Code
import { Component, OnInit, ViewChild } from '@angular/core';
import { LoadingService } from 'src/app/shared/loading.service';
import { PatientService } from '../patient.service';
import { RecordInformationModel } from 'src/app/models/records/RecordInformationModel';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import { GuidModel } from 'src/app/models/common/GuidModel';
import { MatDialog } from '@angular/material/dialog';
// remaining imported modules here...
@Component({
selector: 'app-record-list',
templateUrl: './record-list.component.html',
styleUrls: ['./record-list.component.scss']
})
export class RecordListComponent implements OnInit {
// Class attributes and methods
}