Search code examples
angularangular-pipe

Angular pipe could not be found using ionic 4


recently l create my own pipe in ionic4 name is StatusairportPipe . Then l imported it in app module.ts , now when l am trying to use it l got errors:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>

            </tr>

StatusairportPipe model ts

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

@Pipe({
  name: 'my'
})
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'مجدولة',

  };
  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

app.module.ts

   import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';

    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HTTP } from '@ionic-native/http/ngx';
    import { Network } from '@ionic-native/network/ngx';
    import { StatusairportPipe } from './statusairport.pipe';

    @NgModule({
      declarations:
       [AppComponent, 
        StatusairportPipe

      ],
      entryComponents: [],

      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
        exports:[
    StatusairportPipe,
    AliPipe
  ],
      providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        HTTP,
        Network
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

Solution

  • When I created my own pipe in ionic 4 you need only add it the pipe your created already in module of page you want use. You don`t need to add in app.module