CODEWITHSUNDEEP
angularpipeionic4
GFonzii
GFonzii

Reputation: 33

Import custom pipe Ionic 4

I'm using Ionic 5.2.7 and create a custom pipe icons-category with a Pipes.Module (I'm really not using it anywhere) and I'm trying to use it in my modal-icon- expenses.page but when I use it I have this error.

Uncaught Error: Template parse errors:
The pipe 'iconsCategoria' could not be found ("

        <ion-row>
            <ion-col size="6" *ngFor="let im[ERROR ->]agen of iconPath | iconsCategoria:'asdasd'">
                <ion-item button="true" color="aqua" lin"): ng:///ComponentsModule/ModalIconGastosPage.html@6:44
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11188)
    at JitCompiler._parseTemplate (compiler.js:25721)
    at JitCompiler._compileTemplate (compiler.js:25709)
    at compiler.js:25653
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25653)
    at compiler.js:25566
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25565)

I do not know what I'm doing wrong. Maybe I need to import the Pipes Module somewhere.

Right now I have my modules, pages and my pipe in this way ...

icons-categoria.pipe.ts

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

@Pipe({
  name: 'iconsCategoria'
})
export class IconsCategoriaPipe implements PipeTransform {

  transform(iconsArray: any [], categoria?: string): any[] {

    console.log(categoria);

    return iconsArray;
  }

}

modal-icon-gastos.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ModalIconGastosPage } from './modal-icon-gastos.page';
import { ComponentsModule } from '../../../Components/components.module';
import { IconsCategoriaPipe } from '../../../Pipes/icons-categoria.pipe';

const routes: Routes = [
  {
    path: '',
    component: ModalIconGastosPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ComponentsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  providers: [
    IconsCategoriaPipe
  ],
  declarations: [ModalIconGastosPage, IconsCategoriaPipe],
})
export class ModalIconGastosPageModule {}

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ComponentsModule } from './Components/components.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, FormsModule, ComponentsModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

modal-icon-gastos.page.html

<app-header [titulo]="'Elegí un Icono'"></app-header>

<ion-content color="aqua">
    <ion-grid fixed>

        <ion-row>
            <ion-col size="6" *ngFor="let imagen of iconPath | iconsCategoria:'asdasd'">
                <ion-item button="true" color="aqua" lines="none">
                    <img class="galeria icono" src="/assets/icons/{{imagen.path}}">
                </ion-item>
            </ion-col>
        </ion-row>

    </ion-grid>
</ion-content>

Upvotes: 1

Views: 3697

Answers (1)

Reza
Reza

Reputation: 19843

If you want to have a module for your pipes you need to declare and export the pipe in that module, then import that module in other modules you need

please see this working example https://stackblitz.com/edit/angular-dwkjch

Upvotes: 2

Related Questions