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?