Sorting in the TypeScript/Angular table is functioning properly on every column except for the initial one

Even after carefully following the information provided in the official documentation and implementing the example as suggested, I'm still struggling to sort my first column in descending order. Whenever I attempt to sort by another column and then click on the first column, it only sorts in ascending order. Additionally, any updates made to the table seem to be persistent no matter how many times I try sorting the first column.

You can find the project uploaded here: https://stackblitz.com/edit/angular-ivy-6xblrn. Please bear in mind that the layout may not look visually appealing but if you run it on a local machine, the up/down arrow functionality will be visible (I had some difficulty getting StackBlitz to work properly).

angulartypescripthtml-tableangular-material

Answer №1

To ensure automatic sorting in Angular Material, make sure the column name matches the field name of the object in the data array. This is because Angular Material handles all sorting automatically as a form of "syntactic sugar."

The mat-sort-header directive uses the column names to determine which field to use as a reference for sorting.

Here's a working example on StackBlitz: https://stackblitz.com/edit/angular-ivy-njblvd?file=src/app/app.component.html

P.S: Changes made for clarification:

TS:

  displayedColumns: string[] = [
    'id',
    'firstName',
    'lastName',
    'age',
    'gender',
  ];

HTML:

    <ng-container cdkFocusInitial matColumnDef="id">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        sortActionDescription="Sort by rank"
      >
        No.
      </th>
      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
    </ng-container>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Exploring the Potential of Angular's BehaviorSubject and Output

In my application, I utilize a behavior subject to load and manage data: Within my service, I have the following implementation: data$ = new BehaviorSubject({ users: [], user: {} }); constructor(​​); }​​ dispatch(action: ...

angularparentchildrenbehaviorsubject

Creating an if statement based on the currently chosen option

My angular JS page includes a drop-down list: <div class="col-md-4 fieldMargin"> <div class="dropdownIcon"> <select name="actions" id="actions" ...

angularangularjsangular-ng-if

What is the best way to bring in a service as a singleton class using System.js?

I have a unique Singleton-Class FooService that is loaded through a special import-map. My goal is to efficiently await its loading and then utilize it in different asynchronous functions as shown below: declare global { interface Window { System: Sy ...

javascripttypescriptsystem.jsimport-maps

RXJS - Hold off until the shop is fully stocked

Here's a function I have that needs some adjustment: combineLatest([this.contact$, this.account$]).pipe( map((res) => {contacts = res[0], account = res[1]})).subscribe() I am facing an issue where the contact$ selector is sometimes empty. If it ...

angulartypescriptrxjs

Guide on How to Embed an Angular Module in a Next.js (React App)

I'm currently in the process of integrating Micro Front End. As part of this integration, we need to include an Angular app in Next.js. To do so, we have injected the angular remoteEntry.js as shown below: injectScript({ global: 'app', ...

reactjsangularwebpack-module-federationnextjs-mfmodule-federationnextjs-mfutils

"Exploring the dynamic duo of Angular2 and ng2Material

I am currently facing an issue with the styling in my code while using ng2Material with Angular2. First: A demonstration of Material style functioning properly can be seen in this plunker. When you click on the button, you will notice an animation effect. ...

javascripttypescriptangularangular-material

Next.js TypeScript throws an error stating that the object 'window' is not defined

When trying to declare an audio context, I encountered an error stating that window is undefined. I attempted declaring declare const window :any above window.Context, but the issue persists. Does anyone have a solution for this problem? window.AudioCont ...

typescriptnext.js

Showing the Enum name rather than the value in an Angular HTML template for a bound Typescript Interface

After retrieving an array of objects with various properties from a .NET Controller, I am utilizing the following Typescript code: import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Co ...

angulartypescript

issues arise when deploying the Angular application on GitHub pages

Encountered an error while attempting to deploy my Angular application on GitHub pages using angular-cli-ghpages The bash commands I used when pushing the website to GitHub were as follows: ng build --prod --base-href "https://dinith72.github.io/aiese ...

angulargithub-pagesangular-cli-ghpages

Develop an outline using D3.js for the clipath shape

After successfully creating a shape with a color gradient, I encountered the need for further customization. If you are interested in this topic, check out these related questions: Add multi color gradient for different points in d3.js d3.js scatter plot c ...

javascripthtmlangularjsangulard3.js

Exploring the functionalities of R.pick in TypeScript

Recently, I attempted the following code snippet: import R from 'ramda' import fs from 'fs' import path from 'path' import {promisify} from 'util' const readFile = promisify(fs.readFile) export async function disc ...

typescriptramda.js

What is the best way to remove the underline from Angular Material input fields?

I am currently working with an input element in Angular Material: <md-input-container> <input type="text" mdInput placeholder=""> </md-input-container> While the input is focused, it displays an underline. Is there a way to hide or remo ...

angularangular-material2

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

.wrapper-noaction { position: absolute; margin-top: -558px; width: 100%; height: 100%; border: 1px solid red; } .video-stat { width: 94%; margin: 0 auto; } .player-control { background: rgba(0, 0, 0, 0.8); border: 1px ...

javascripthtmlangularcsstwitter-bootstrap-3

Tips for linking the search button to the corresponding input field in Angular

I'm working on a form that dynamically generates input fields using a for loop. Each input field has a corresponding search button. When a search button is clicked, it triggers a method to execute on all input fields. How can I make sure that the sear ...

htmlangular

Tips on joining property name in typescript

Attempting to pass values between components using inheritance but encountering difficulties. Is it possible to achieve this through a service? If so, how can I overcome this issue? Any assistance in finding the solution would be greatly appreciated. bus. ...

angulartypescriptangular8angular14

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition

Angular facing issue with loading data and not displaying on time

In my project, I am facing difficulty in displaying the users' data on the user interface (UI). Despite trying to display the data, I am encountering issues. Here is the data from my users.json file: { "success": true, "summary": { "total_reg ...

angular

Top Method for Connecting Numerous Dependent HTTP Requests Without the Need for Multiple Subscriptions and Iterations

I'm working on an angular project where I have an API that creates a line item and then loops through to call the API for each modification before firing the print request. Currently, I am using multiple subscribes for this process and I was wondering ...

node.jsangularapihttp

Tips for resolving package conflicts while integrating Wagmi View into a React/Typescript application

I am facing an issue while attempting to incorporate wagmi and viem packages into my project. Currently, my project utilizes the react-scripts package with the latest version being 5.0.1, and Typescript is operating on version 4.9.5. However, upon trying ...

reactjstypescriptnpmreact-scriptswagmi

Is it possible for me to test events in protractorjs/cucumberjs?

Using Cucumber.js Instead of Java I have an Angular component that incorporates a directive to adjust focus once a certain number of characters are entered into the input field. I want to verify this behavior in my Cucumber tests. 1) Is the webElement.se ...

angularprotractorwebdrivercucumberjs