Angular Pipe displays values properly, but ngFor fails to render them

Question

Angular Pipe displays values properly, but ngFor fails to render them

I am using a pipe to filter my ngFor loop with exact matches that are passed through by clicking on the filter argument.

Below is the code for my pipe:


        transform(values: any[], criteria: string, group): any[] {
            if (!values) {
              return [];
            }
            if (!group || group.length === 0) {
              return values;
            }
            return values.filter(item => item[criteria] === group);
          }

Here is how I'm implementing it in HTML:


        <mat-drawer-container class="example-container">
          <mat-drawer mode="side" opened class="side-nav">
            <div *ngFor="let skillGroup of skillGroups | unique:'skillGroup'">
              <button mat-button class="filter">
                <div (click)="filterSkills(filter.textContent)" #filter>
                  {{ skillGroup.skillGroup }}
                </div>
              </button>
            </div>
          </mat-drawer>
          <mat-drawer-content>
            <div *ngIf="SKILLS?.length > 0; else noItem">
              <div *ngFor="let skill of SKILLS | filter:'skillGroup':filteredValue">
                <div class="skill">
                  <mat-accordion>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        <mat-panel-title>{{ skill.skillname }} </mat-panel-title>
                        <mat-progress-bar
                          class="progress-bar"
                          [value]="skill.skillvalue"
                          [color]="'accent'"
                          [mode]="'buffer'"
                        ></mat-progress-bar>
                        <mat-panel-description> </mat-panel-description>
                      </mat-expansion-panel-header>
                      <div>{{ skill.description }}</div>
                    </mat-expansion-panel>
                  </mat-accordion>
                </div>
              </div>
            </div>
            <ng-template #noItem>
              <app-data-loader></app-data-loader>
            </ng-template>
          </mat-drawer-content>
        </mat-drawer-container>

When I click on the div element with the id "filter", I update the value of the variable filteredValue. However, the ngFor loop does not display the filtered results as expected. Even though I can see the values returned from the pipe while debugging, they are not being displayed in the ngFor loop. Can you help me identify where I made a mistake?

angular typescript ngfor angular-pipe

Answer 1

Answer №1

If you are attempting to perform operations on a collection within a *ngFor directive to filter the collection before looping through it, there is a recommended approach.

According to the Angular documentation section on pipes, it is advised not to use filter or order operations directly within an *ngFor directive using pipes (https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe)

Instead, you can filter your data before binding it to the *ngFor directive in your component:

component.ts

public ngOnInit(): void {
    requestCollectionFromApi().subscribe(result => {
        skillGruppen = filter(result, 'skillGruppe');
    });
}

private filter(result: Array, unique: string): Array {
    // Implement your filter logic here and return a new array with filtered data.
}

Then, in your HTML, you can remove the pipe usage:

<div *ngFor="let skillGruppe of skillGruppen">
  <button mat-button class="filter">
     <div (click)="filterSkills(filter.textContent)" #filter>
         {{ skillGruppe.skillGruppe }}
      </div>
    </button>
</div>

This approach should help you achieve the desired functionality without violating the recommendations mentioned in the Angular documentation.

Answer 2

If you are attempting to perform operations on a collection within a *ngFor directive to filter the collection before looping through it, there is a recommended approach.

According to the Angular documentation section on pipes, it is advised not to use filter or order operations directly within an *ngFor directive using pipes (https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe)

Instead, you can filter your data before binding it to the *ngFor directive in your component:

component.ts

public ngOnInit(): void {
    requestCollectionFromApi().subscribe(result => {
        skillGruppen = filter(result, 'skillGruppe');
    });
}

private filter(result: Array, unique: string): Array {
    // Implement your filter logic here and return a new array with filtered data.
}

Then, in your HTML, you can remove the pipe usage:

<div *ngFor="let skillGruppe of skillGruppen">
  <button mat-button class="filter">
     <div (click)="filterSkills(filter.textContent)" #filter>
         {{ skillGruppe.skillGruppe }}
      </div>
    </button>
</div>

This approach should help you achieve the desired functionality without violating the recommendations mentioned in the Angular documentation.

Answer 3

Answer №2

Consider converting your key value pair, which are the parameters for filtering, into an object format.

Afterwards, implement a solution similar to the following code snippet:

export class CustomFilterPipe implements PipeTransform {
    transform<T>(elements: T[], filterParams: {key: string, value: any}): T[] {
        if (!elements || !filterParams) {
            return elements;
        }        
        return elements.filter(element => element[filterParams['key']] == filterParams['value']);
    }
}

Answer 4

Consider converting your key value pair, which are the parameters for filtering, into an object format.

Afterwards, implement a solution similar to the following code snippet:

export class CustomFilterPipe implements PipeTransform {
    transform<T>(elements: T[], filterParams: {key: string, value: any}): T[] {
        if (!elements || !filterParams) {
            return elements;
        }        
        return elements.filter(element => element[filterParams['key']] == filterParams['value']);
    }
}

Angular Pipe displays values properly, but ngFor fails to render them

Answer №1

component.ts

Answer №2

Similar questions

A guide on exporting an Excel file with Spring Boot and Angular 2

What is the method for substituting one text with another using two-way data binding?

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Show image using Typescript model in Angular application

What is the method for defining functions that accept two different object types in Typescript?

I am unable to utilize the outcome of a custom hook within a function or within an effect hook

Angular 2: Issue with data table not updating after item deletion

Accessing instance variables from a chained observable function in Angular 2/Typescript

What is the best way to include documentation for custom components using jsDoc?

Enhancing SQLite syntax in Ionic 2: A fresh approach!

What is the correct way to utilize refetchOnReconnect for a builder.mutation endpoint in @redux/toolkit/query?

The @Input directive is not compatible with the OnPush change detection strategy

Steps for Adding a JS file to Ionic 3

How can I enable autofocus on a matInput element when clicking in Angular 6?

Angular 6: Harnessing the Power of RouterLinks

Access the Angular directive instance before it is actually rendered

Upon initial page load, the distinctUntilChanged() function will not be triggered

Why won't angular ng update work? Is there a timeout issue with the proxy settings?

Can an Observable be created that emits an array produced by awaiting asynchronous methods?

Tips for maintaining the original data type while passing arguments to subsequent functions?