Angular 2 Custom Pipe

Question

I'm following the turorial of John Lindquist about Angular 2 on egghead.com and after doing exactly the same thing as him I don't have the same result.

It's about the course 17.

I have a custom filter which works perfectly :

started-pipe.ts

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

@Pipe({
    name: "started"
})

export class StartedPipe{
    transform(value, [status]){
        return value.filter((item)=> item.status === "started");
    }
}

todo-list.ts

import {Component, Input} from '@angular/core';
import {TodoService} from "./todo-service";
import {TodoItemRenderer} from "./todo-item-renderer";
import {StartedPipe} from './started-pipe';

@Component({
    selector: 'todo-list',
    pipes: [StartedPipe],
    directives: [TodoItemRenderer],
    template: `
        <div>
            <ul>
                <li *ngFor="let todo of todoService.todos | started :     'started'">
                    <todo-item-renderer 
                    [todo]="todo"
                    (toggle)="todoService.toggleTodo($event)">
                    </todo-item-renderer>
                </li>
            </ul>
        </div>
    `
})

export class TodoList{
    @Input() status;
    constructor(public todoService: TodoService){}
}

But when I want to use the array arg of my transform value it does not work anymore :

started-pipe.ts

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

@Pipe({
    name: "started"
})

export class StartedPipe{
    transform(value, [status]){
        return value.filter((item)=> item.status === status);
    }
}

If you have an idea it's welcomed !

Thanks.

score 5 · Accepted Answer · answered May 11 '16 at 20:39

5

You need to change the syntax a bit:

 transform(value, status){ // remove brackets from status

Starting with beta.16 pipe transform signature has been changed from

export interface PipeTransform { transform(value: any, args: any[]): any; }

to

export interface PipeTransform { transform(value: any, ...args: any[]): any; }

See also: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-1

answered May 11 '16 at 20:39

yurzui

205,937
32
433
399

Hey buddy :) One question: are you sure this is still the way to do it? It seems I cannot have anymore a pipe property on the component. – FrancescoMussi Dec 05 '16 at 13:45
1

@johnnyfittizio You should declare your pipe within `declarations` array of your module – yurzui Dec 05 '16 at 13:51
But do you mean declarations property of the app.module.ts? – FrancescoMussi Dec 05 '16 at 13:55
@johnnyfittizio Exactly – yurzui Dec 05 '16 at 13:58
But if I don't want to make it global. Can I just import it in the component? – FrancescoMussi Dec 05 '16 at 14:09
@johnnyfittizio Create feature module for this https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules – yurzui Dec 05 '16 at 14:11
Sorry - I really couldn't manage to import a pipe only locally in the component besides using the feature module. I have asked a question specifically about it: https://stackoverflow.com/questions/40977490/angular-2-import-pipe-locally – FrancescoMussi Dec 05 '16 at 15:19
@johnnyfittizio https://plnkr.co/edit/8AAWL2KpPbDoDZto9xdF?p=preview You can also take a look at another examples https://github.com/angular/material2/blob/2.0.0-alpha.10/src/lib/button/button.ts#L159-L171 – yurzui Dec 05 '16 at 16:19

Angular 2 Custom Pipe

1 Answers1