How do I add I reverse pipe to *ngFor that uses an Observeable?

Question

I have an Ionic app that uses firestore and AngularFire auto IDs when adding to the collection. I want to grab the firestore collection and reverse the order. I think I have the pipe right, but receive the error error NG8004: No pipe found with name 'reverse'.

Is my Pipe right and how do I add a pipe to the page

Html

<ion-content>
  <div *ngFor="let message of (messageList | async | reverse)" >
    Name {{message.name}}
  </div>

or the simplified list without observable also fails.

<ion-list>
  <ion-item *ngFor="let test of list | reverse">
    <ion-label>
      <h3>{{test.name}}</h3>
    </ion-label>
  </ion-item>
</ion-list>


list = [
  {name: "Tom"},
  {name: "Dick"},
  {name: "Harry"}
]

reverse.pipe.ts

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: any) {
  if (!value) return;
  return value.reverse();
 }
}

app.module.ts

import { ReversePipe } from './reverse.pipe';

@NgModule({
  declarations: [AppComponent, ReversePipe],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    provideFirebaseApp(() => initializeApp(environment.firebase)),  
    provideAuth(() => getAuth()), 
    provideFirestore(() => getFirestore()), 
    provideStorage(() => getStorage())
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

.ts page file

 import { ReversePipe } from '../../reverse.pipe';

 export class UnitLogsPage {
   reverse: ReversePipe;

Answer 1

To get the pipe to work, I first had to edit the reverse.pipe.ts to include standalone: true

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'reverse',
 standalone: true
})
export class ReversePipe implements PipeTransform {

  transform(value: any) {
    if (!value) return;
    return value.reverse();
  }
}

remove reference in the app.module.ts. Then add it to the page.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { UnitLogsPageRoutingModule } from './unit-logs-routing.module';
import { UnitLogsPage } from './unit-logs.page';
import { ReversePipe } from '../../reverse.pipe';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReversePipe,
    UnitLogsPageRoutingModule
  ],
  declarations: [UnitLogsPage]
})
export class UnitLogsPageModule {

}

Answer 2

When you don't use standalone components:

See that as always, you need declare the pipe in the same module you're declaring your component or in a module (and use export) and import this module in the module where you're declaring the component

If the component and the ReversePipe is declared in the same module "myModule"

@NgModule({
  imports: [...]
  declarations: [MyComponent, ReversePipe]
  ...
})
export class myModule{..}

If the reversePipe is declared in an "UtilsModule"

@NgModule({
  imports: [...]
  declarations: [ReversePipe]
  ],
  exports: [ReversePipe]
})
export class UtilsModule{..}

@NgModule({
  imports: [UtilsModule,...]
  declarations: [MyComponent]
  ...
})
export class myModule{..}

Wee need think in a module as "something" that need "compile" separately. So need know about all the components, pipe, directive.. that are used in this module