Using Pipe in Ionic 2 / 3.0.1 doesn't work

[gsimon]

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:

But it gives me, the following error:

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

Thank in advance

[AaronSterling]

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.

[subhash-ztech]

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’;

[Hash57]

@gsimon

do that i have used a custom

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

Thanks,
Hash57

[addwebsolution]

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,

[AaronSterling]

I don’t understand your question, sorry.

[Hash57]

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

[AaronSterling]

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.

[Hash57]

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

[AaronSterling]

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' ?

[Hash57]

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

[rapropos]

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