Can the tiles in a grid-list be organized in a specific order?

Question

Can the tiles in a grid-list be organized in a specific order?

I am facing an issue with a class named 'scenario' that has properties such as 'id', 'name', and 'number' among others.

In the HTML, scenarios are displayed in this format:

<mat-grid-list [cols]="breakpoint" rowHeight="4:4" [@gridAnimation]="(scenarios$ | async)?.length" (window:resize)="onResize($event)">
    <mat-grid-tile *ngFor="let scenario of filteredScenarios$ | async ">
      <app-scenario-card [scenario]="scenario" [routerLink]="['/scenario', scenario.id]"></app-scenario-card>
    </mat-grid-tile>
  </mat-grid-list>

My question is, can I sort the displayed tiles of scenarios by a selected property like name, id, or number? Most resources I've found regarding sorting focus on tables or grids.

If it is possible, could someone provide me with an example or approach to achieve this?

Thank you in advance.

Also, changing from grid-list to table is not an option for me.

The 'Scenario' class has the following properties:

export class Scenario {
id: number;
scenarioName: string;
scenarioDescription: string;
periods: number; }

I already have a search box for filtering data. Now, I need help implementing a sort function for properties like id, scenarioName, and periods using buttons or dropdown menus.

The code for filtering currently looks like this:

this.scenarios$ = this.scenariosService.getScenarios();
this.filter = new FormControl('');
this.filter$ = this.filter.valueChanges.pipe(startWith(''));
this.filteredScenarios$ = combineLatest(this.scenarios$, this.filter$).pipe(
  map(([Scenario, filterString]) => Scenario.filter(scenario => scenario.scenarioName.indexOf(filterString) !== -1)));

angular typescript sorting

Answer 1

Answer №1

Ensure that filteredScenarios$ is sorted by a specific property before passing it to the template. To achieve this, consider introducing another BehaviorSubject that will hold the sorting property.

It's challenging to provide precise code without knowing the structure of your objects, but here's an attempt:

In TypeScript:

private sortProperty$ = new BehaviorSubject<string>('name'); // set default sorting property
filteredSortedScenarios$: Observable<Scenario>

In the constructor or ngOnInt:

this.filteredSortedScenarios$ = combineLatest([this.filteredScenarios$, this.sortProperty$])
  .pipe(
    map(([scenarios, sortBy]) => {
      console.log('Sorting by', sortBy);

      return scenarios.sort((a, b) => {
        switch (sortBy) {
          case 'name':
            return a.name.localeCompare(b.name);

          case 'otherProperty':
            return ...;
        }
      });
    }));

The combineLatest function triggers when any of the Observables change, and within the map function, you can proceed with sorting the list accordingly.

To update the sorting property, simply call:

sortProperty$.next('newSortByThisProperty');

Lastly, in the template, iterate through scenarios from filteredSortedScenarios$:

<mat-grid-tile *ngFor="let scenario of filteredSortedScenarios$ | async ">

Answer 2

Ensure that filteredScenarios$ is sorted by a specific property before passing it to the template. To achieve this, consider introducing another BehaviorSubject that will hold the sorting property.

It's challenging to provide precise code without knowing the structure of your objects, but here's an attempt:

In TypeScript:

private sortProperty$ = new BehaviorSubject<string>('name'); // set default sorting property
filteredSortedScenarios$: Observable<Scenario>

In the constructor or ngOnInt:

this.filteredSortedScenarios$ = combineLatest([this.filteredScenarios$, this.sortProperty$])
  .pipe(
    map(([scenarios, sortBy]) => {
      console.log('Sorting by', sortBy);

      return scenarios.sort((a, b) => {
        switch (sortBy) {
          case 'name':
            return a.name.localeCompare(b.name);

          case 'otherProperty':
            return ...;
        }
      });
    }));

The combineLatest function triggers when any of the Observables change, and within the map function, you can proceed with sorting the list accordingly.

To update the sorting property, simply call:

sortProperty$.next('newSortByThisProperty');

Lastly, in the template, iterate through scenarios from filteredSortedScenarios$:

<mat-grid-tile *ngFor="let scenario of filteredSortedScenarios$ | async ">

Can the tiles in a grid-list be organized in a specific order?

Answer №1

Similar questions

Angular is unable to access a service method through an observable subscription

While Typescript has the ability to infer recursive functions, it unfortunately cannot infer recursive types

Explore the world of data manipulation in Angular by experimenting with different

I am looking to conceal the y-axis labels and tooltip within the react chart

There was a Runtime Error that occurred, stating a TypeError: It is not possible to access properties of an undefined value (specifically

Tips for conducting key down event testing on a material ui MenuList element utilizing react-testing-library

Can diff coverage be implemented for Angular 9 projects?

Unable to assign value to a public variable in Angular

Rendering a sanitized string with interpolation in Angular 2

Developing an Angular application and deploying it onto the server

Extract a section of the table

How can I resolve a promise that is still pending within the "then" block?

ngPrime table column selection and data extraction

I am encountering a multitude of errors while trying to run the npm install

Differentiating navigation design in various views of Angular 4

Stop the current HTTP request and initiate a new one asynchronously

How to sort time in hms format using a MySQL query

Sending an array of data using Angular in a web service

Watching videos is quite a time-consuming process due to the long loading times

Setting a default value for a textfield within Angular 4