Using Pipe in Ionic 2 / 3.0.1 doesn't work

Hi all,

I have tried to sort my list of vehicles based on their type of service; in order to do that i have used a custom pipe:

import { Injectable, Pipe } from 'angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe {
    transform(vehicles: any[], args: any[]): any {
        return vehicles.filter(vehicle => vehicle.service_type == 'Replacement');
    }
}

And used it inside my html code:

Also. i have declared it inside app.module.ts under declarations array and imported it accordingly:

image

But it gives me, the following error:

image

Of course, if I remove the pipe, the error disappears.
Any ideas, please ?

Thank in advance

Don’t sort with a Pipe. That functionality was removed from Angular for a reason, and the Angular Pipe docs explain why. Sort in your controller, render in your HTML.

You are getting that error because the import statement you are using is for pretty older version of Angular.

Your import statement should be as follows to work:

import { Injectable, Pipe } from ‘@angular/core’;

1 Like

Hi Aaron, how can we make use of pipe at controller level , all are showing only at html side, please help

Thanks,
Hash57

Hi, @gsimon

import { Injectable, Pipe } from '@angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe {
    transform(vehicles: any[], args: any[]): any {
        return vehicles.filter(vehicle => vehicle.service_type == 'Replacement');
    }
}

Hope, this will solve your issue
Thanks,

I don’t understand your question, sorry.

Hi ,Sorry for the inconvenience, my requirement is i need to do date filtering using predefined/custom pipes …
in all the example i refer , they just doing business logic in pipe, and using that pipe at view/HTML level ,like this {{ date | ‘yyyy MM dd’}} …etc… my need is same thing how can we do in controller (ts file) under some method…how i can i call that pipe ,please help…

Thanks,
Hash57

Define your sorting function, then sort your array into sortedDates or something, then in the template use *ngFor over sortedDates. I do this with Observables, so the Observable emits a new value each time the sorted array changes and this new array value gets rendered in the template.

I only think of Pipes as a mask. The data is already computed, and I want to show only two decimal places, or all capital letters, something like that. So a Pipe performs extremely simple calculation, nothing hard.

this is my pipe

the idea is to call this pipe from controller side ,to get required format like we do in java,js functions…

import { Pipe, PipeTransform } from ‘@angular/core’;
import { DatePipe } from ‘@angular/common’;

@Pipe({
name: ‘custom-date’,
})
export class CustomDatePipe implements PipeTransform {
result: string;
transform(value: Date, requiredFormat) {
var datePipe = new DatePipe(“en-US”);
this.result = datePipe.transform(value, ‘yyyy’);
return this.result;
}
}

in my controller file, i imported this pipe, DatePipe like this ,

import { CustomDatePipe } from ‘./…/…/pipes/custom-date/custom-date’;
import { DatePipe } from ‘@angular/common’;

and in the constructor,i added CustomDatePipe like this,
constructor(public customDate:CustomDatePipe,…){
}

at some point i’m calling like this

var result = this.customDate.transform(new Date(), ‘h a’);…
getting errors like

You may need an appropriate loader to handle this file type.
| this.customDate = customDate;

please check where i’m committed wrong,please help

Thanks,
Hash57

I don’t know anything about the Angular date pipe, because I use date-fns. But why do you need a special pipe for what you are doing? Why can’t you just use date:'MM-dd-yyyy' ?

My Requirement is i’m getting start_time:“20:00” , end_time:“11:30” values from server response, there is some more big response ,but here it is not required … i need to show 8 am to 9pm ,if start,end_times are in different meridian ,vice versa (pm- am) , both the of them are in same case then 8 to 9 am and vice versa (pm)… so i need to check them in which meridian they are so i’m trying to do.

in angularjs(1) i did like this for web app.

vm.matchStartTimeString = $filter(‘date’)(vm.matchStartTiming, ‘h a’);

the result of vm.matchStartTimeString will be like ===> 8 am…
same thing i’m trying to do in native apps using ionic…

and i make into 4 branches (both AM,AM-PM,PM-AM,both PM) , for selected state, in switch cases i’m doing bussines logic…so, i unable to use that pipe at HTML level, i must use that pipe at controller level only…

any help ,much appriciated

Thanks,
Hash57

Anything you need to do with dates can be done with date-fns.