The pipe 'reverse' could not be found

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 { }