I attempted to create a pipe in the ionic -v4 beta version to reverse an array, but encountered a parser error in the template. Below is the example of what I tried:
ionic g pipe pipe/reverse
Here is the pipe definition:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.slice().reverse();;
}
}
Usage of the generated pipe in the code:
<ion-card (dblclick)="delete(i)" *ngFor="let i of items | reverse">
<div style=" height:250px;overflow: hidden;background-color: brown;">
<img [src]="i.imageName"/>
</div>
<ion-card-header>
<ion-card-subtitle>{{i.timestamp|date:"medium"}}</ion-card-subtitle>
<ion-card-title>
{{i.amt | currency:"₹":" ₹ "}}
</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
{{i.discription.data}}
</p>
</ion-card-content>
</ion-card>
Error message being displayed:
core.js:12501 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'reverse' could not be found ("
</ion-item>
</ion-list>
<ion-card (dblclick)="delete(i)" *ngFor="l[ERROR ->]et i of items | reverse">
<div style=" height:250px;overflow: hidden;background-color: brown;">
"): ng:///HomePageModule/HomePage.html@48:44
Error: Template parse errors:
The pipe 'reverse' could not be found ("
</ion-item>
</ion-list>
<ion-card (dblclick)="delete(i)" *ngFor="l[ERROR ->]et i of items | reverse">
<div style=" height:250px;overflow: hidden;background-color: brown;">
"): ng:///HomePageModule/HomePage.html@48:44
...Note: I have added the pipe in the app.module.ts file and included it in the @NgModule declaration array.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Other imports...
import { TruncatePipe } from './pipe/truncate.pipe';
import { ReversePipe } from './pipe/reverse.pipe';
@NgModule({
declarations: [AppComponent, AddEntryPage, AddEntrySecondPage, AddEntryThirdPage, TruncatePipe, ReversePipe],
// Other module configurations...
})
export class AppModule {}
If you know the proper way to solve this issue, I would appreciate your assistance. Thank you in advance.