The Angular Table Order Pipe does not properly reinitialize its original state

This is my first time posting a question here.

The issue I'm facing involves creating a pipe to reorder a specific column in my application (in alphabetical order). The column can have 3 statuses: -1, 0, and 1, with 0 being the default initial status. However, when I reorder the table and set the status back to 0, it doesn't reverse the order, but instead maintains the current order.

import { Pipe, PipeTransform } from '@angular/core';
import { ExternalUploads } from 'src/app/model/external/ExternalUploads ';
@Pipe({
  name: 'orderpipe',
  pure: false
})
export class OrderPipe implements PipeTransform {

  transform(uploads: ExternalUploads [], colstat: any) {
    console.log(colstat.value);
    
    let result : ExternalUploads[] = uploads;

    if(colstat.value!= 0)
        if(colstat.value=== 1)
            result.sort((a,b) => a.name=== b.name? 0 : a.name< b.name? -1 : 1);
        else 
        result.sort((a,b) => a.name=== b.name? 0 : a.name> b.name? -1 : 1);

    return result; 
  }
}

I also experimented with returning "uploads" instead of "result," which caused the table to change its order, even though it shouldn't. What steps should I take to resolve this issue?

(I am required to use a pipe and I am working with Angular 11).

Answer №1

Did you attempt to implement the following code snippet :

if (colstat.value=== 1)
        result.sort((a,b) => a.name=== b.name? 0 : a.name< b.name? -1 : 1);
else if (colstat.value=== -1) 
    result.sort((a,b) => a.name=== b.name? 0 : a.name> b.name? -1 : 1);

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

What is the best practice for inserting typescript definitions and writing them when the object already has a pre-existing definition?

Apologies for this question, as I am struggling to find the necessary information due to my limited understanding of Typescript. I have integrated a jquery plugin called typeahead and added a global variable named bound on the window object for communicati ...

Tips for displaying the string value of an elementFinder when encountering an error in protractor

I have the following code snippet: export async function waitTillClickable(e: ElementFinder): Promise<ElementFinder> { const conditions = EC.visibilityOf(e); await browser.wait(conditions, DEFAULT_TIMEOUT, `Element did not return ...

When utilizing Google Analytics in conjunction with Next.Js, encountering the error message "window.gtag is not

Encountering an error on page load with the message: window.gtag is not a function Using Next.js version 14.0.4. All existing solutions seem to hinder data collection, preventing the website from setting cookie consent correctly. I am uncertain about the ...

Customize your Loopback 4 OpenAPI with NSWAG by making filters optional and specifying data types

I am encountering an issue with the Loopback 4 filter on the generated endpoints being marked as required in my Nswag typescript file. I need it to be optional, but I am struggling to locate where this requirement is originating from. The endpoint from my ...

Leveraging pipes and index in ngFor in Angular for optimal data manipulation

When working with Angular beta, I encountered some challenges while trying to use pipes and the index in an ngFor loop. Here's the issue I faced: Parser Error: Unexpected token = The pipe 'let' could not be found This error occurred when ...

The element does not have a property named 'className' in the object type '{ props: ReactNode; }'

I am currently in the process of converting a Next.js project from JavaScript to TypeScript, and I encountered an issue: Property 'className' does not exist on type '{ props: ReactNode; }'. In JavaScript, I could access className from p ...

Using the return statement to set a value from a callback function in TypeScript

As I retrieve data from an array of class People, each person has an attendance list represented by Observable<any[]>. // Defining the Person class class Person { id: number; name: string; attendance: Observable<any[]>; // Represents ...

Having trouble with animation transition in Angular 6?

When it comes to animating the opening and closing of a Sidenav, what are some best practices? animations: [ trigger('slider', [ state('open', style( {} )), state('closed', style( ...

Data exchange between components via an API

I'm in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage utilizes a GET request through a service to retrieve an array of objects containing the movie data. This movi ...

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

I am facing an issue with my code where I load a set of regular expressions from an external source. My goal is to determine if a given string is a valid regex without causing the application to crash due to a syntax error. Despite trying to use try/catch ...

When an import is included, a Typescript self-executing function will fail to run

Looking at this Typescript code: (()=> { console.log('called boot'); // 'called boot' })(); The resulting JavaScript is: (function () { console.log('called boot'); })(); define("StockMarketService", ["require", "exp ...

Please provide a declaration or statement when using the subscribe() method in TypeScript 3.0.1

I'm encountering a "declaration or statement expected" error after updating TypeScript and Angular. getTopics() { this._dataService.getTopics().subscribe(res => { this.topics = res; for (let i = 0; i < this.topics.length; i ...

Oops! To access useCart functionality in your NextJS application, make sure to use it within a CartContextProvider

Encountering the error "useCart must be used within a CartContextProvider" in the NextJS application is causing some trouble. The useCart hook is being utilized from a custom useCart.tsx file, and a CartContextProvider is provided at the application's ...

The formBuilder validator pattern seems to be malfunctioning

I am attempting to display a message when the password does not meet the formGroup pattern. Here is how my FormGroup is initialized: this.signupForm = fb.group({ userName: ['', Validators.compose([Validators.required,Validators.pattern(/^&bsol ...

Angular Fails to Identify Chart.js Plugin as an Options Attribute

Encountering issues with using the 'dragData' plugin in Chart.js 2.9.3 within an Angular environment: https://github.com/chrispahm/chartjs-plugin-dragdata After importing the plugin: chartjs-plugin-dragdata, I added dragdata to the options as sh ...

Ways to restrict access for non-authorized individuals to view pictures stored in Firebase Storage

Our application allows users to upload images using AngulrFirestore, which are then saved in Firebase storage. When the file is uploaded, we receive a DownloadURL and save it in a firestore document for the respective object. However, we have encountered ...

Can getters and setters be excluded from code coverage reports in Angular projects?

Looking to clean up my coverage reports for the front end portion of an angular project by removing trivial code like getters and setters. I generate my reports using npm run test-sonar -- --coverage, but everything is included in the report when I view ...

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...

Exploring the Power of TailwindCss in Storybook 6 for Angular Development

I am in the process of creating a component library using Angular version 11.2.8, and I'm attempting to integrate TailwindCss and Storybook 6. Despite trying various configurations, none seem to be working correctly for me. Whenever I run Storybook, ...

Having trouble understanding how to receive a response from an AJAX request

Here is the code that I am having an issue with: render() { var urlstr : string = 'http://localhost:8081/dashboard2/sustain-master/resources/data/search_energy_performance_by_region.php'; urlstr = urlstr + "?division=sdsdfdsf"; urlst ...