The pipe 'reverse' could not be found - html

Question

My data is arranged in ascending order... and i want it in descending order. I am using angular4.
For this i am using a reverse pipe. The code for the same is as below. The first time i used it...it worked ..but later from second time onwards it has started giving error as --> The pipe 'reverse' could not be found.
This is were i referred the code from -
Invert Angular 2 *ngFor
transaction.component.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class TransactionComponent implements OnInit ,PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
transaction.component.html
<tr *ngFor="let dat of result |reverse | filter:filterdata|
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">

Answer 1

The below code declares a pipe.
reverse.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse',
pure:false
})
export class ReversePipe implements PipeTransform{
transform (values: any) {
if (values) {
return values.slice().reverse();
}
}
.....//code
}
In order to use it in your app.You need to import the pipe and add it to the declarations in your module like below.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { ReversePipe } from '../path/to/yourpipe'
#NgModule({
declarations: [
AppComponent,
ReversePipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Working demo on Stackblitz
Hope this helps :)

Answer 2

Add your pipe to declarations array in your module.
#NgModule({
declarations: [
// import and add your pipe to this.
],
imports: [
],
providers: [],
bootstrap: []
})
export class AppModule { }