The built-in pipe is work,but all custom pipes that i wanna use are the same error:
the pipe 'actStatusPipe' could not be found
[ERROR ->]{{data.actStatus | actStatusPipe}}
I have tried two ways,declare it in app.module's declarations:
app.module.ts:
import {ActStatusPipe} from '../pipe/actPipe' @NgModule({ declarations: [ AppComponent, HomePage, ActivitiesList, ActStatusPipe ], ... })
or use other module to declare and export all my pipes: //pipe
import {ActStatusPipe} from "./actPipe" @NgModule({ declarations:[ActStatusPipe], imports:[CommonModule], exports:[ActStatusPipe] }) export class MainPipe{}
and import it in app.module.
//pipe import {MainPipe} from '../pipe/pipe.module' @NgModule({ declarations:[...], imports:[...,MainPipe], })
But none of them work in my app.
Here is my code of the pipe:
import {Pipe,PipeTransform} from "@angular/core"; @Pipe({ name:'actStatusPipe' }) export class ActStatusPipe implements PipeTransform{ transform(status:any):any{ switch (status) { case 1: return "UN_PUBLISH"; case 2: return "PUBLISH"; default: return status } } }
I think it is most of the same with the document(In fact,i have just copied from the document and made a little modification)
And my angular2's version is 2.1.
Lots of solution that can be searched in stackOverflow and google are tried in my app,however they don't work.
This confused me a lot,thanks for you answer!
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
Pipes were earlier called filters in Angular1 and called pipes in Angular 2 and 4. It takes integers, strings, arrays, and date as input separated with | to be converted in the format as required and display the same in the browser.
see this is working for me.
ActStatus.pipe.ts First this is my pipe
import {Pipe,PipeTransform} from "@angular/core"; @Pipe({ name:'actStatusPipe' }) export class ActStatusPipe implements PipeTransform{ transform(status:any):any{ switch (status) { case 1: return "UN_PUBLISH"; case 2: return "PUBLISH"; default: return status } } }
main-pipe.module.ts in pipe module, i need to declare my pipe/s and export it.
import { NgModule } from '@angular/core'; import {CommonModule} from "@angular/common"; import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <--- @NgModule({ declarations:[ActStatusPipe], // <--- imports:[CommonModule], exports:[ActStatusPipe] // <--- }) export class MainPipe{}
app.module.ts user this pipe module in any module.
@NgModule({ declarations: [...], imports: [..., MainPipe], // <--- providers: [...], bootstrap: [AppComponent] })
you can directly user pipe in this module. but if you feel that your pipe is used with in more than one component i suggest you to follow my approach.
How to use pipe totally depends on your project complexity and requirement. you might have just one pipe which used only once in the whole project. in that case you can directly use it without creating a pipe/s module (module approach).
This didnt worked for me. (Im with Angular 2.1.2). I had NOT to import MainPipeModule in app.module.ts and importe it instead in the module where the component Im using the pipe is imported too.
Looks like if your component is declared and imported in a different module, you need to include your PipeModule in that module too.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With