angular2 error with pipe filter in component

Question

I'm trying to add simple search filter in input, so it could filter my records in table.

But I'm receiving this kind of error:

app/components/orders/orders.component.ts(12,2): error TS2345:
 Argument of type '{ moduleId: string; selector: string; templateUrl:
 string; pipes: typeof FilterPipe[]; }' is not assignable to parameter
 of type 'Component'.   Object literal may only specify known
 properties, and 'pipes' does not exist in type 'Component'.

All files:

orders.component.html, orders.component.ts, filter.pipe.ts are in the same folder

And there is code in files:

HTML in orders.component.html

<input class="prompt" type="text" placeholder="Szukaj zlecenia..." [(ngModel)]="term">

<tr *ngFor="let order of orders">
    <td>{{order.orderNum}}</td>
    <td>{{order.clientNum}}</td>
    <td>{{order.dateCreated}}</td>
    <td>{{order.account}}</td>
    <td>{{order.status}}</td>
</tr>

filter.pipe.ts

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

    @Pipe({
        name: 'ordersFilter',
        pure: false
    })
    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], args: any[]): any {
            return items.filter(item => item.title.indexOf(args[0].title) !== -1);
        }
  }

orders.component.ts

import { Component } from '@angular/core';
    import { OrderService } from '../../services/order.service'
    import { Order } from '../../structure/Order';
    import { Injectable, Pipe, PipeTransform } from '@angular/core';
    import { FilterPipe } from './filter.pipe';

    @Component({
        moduleId: module.id,
        selector: 'orders',
        templateUrl: 'orders.component.html',
        pipes: [FilterPipe]
    })

It looks like it doesn't like pipes: [FilterPipe] but, as far as I know it is set properly.

In web browser I'm receiving this error:

zone.js:388 Unhandled Promise rejection: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6 ; Zone: <root> ; Task: Promise.then ; Value:
 Error: Template parse errors:(…) Error: Template parse errors: The
 pipe 'ordersFilter' could not be found ("      </thead>        <tbody>         <tr
 [ERROR ->]*ngFor="let order of orders | ordersFilter:term">
            <td>{{order.orderNum}}</td>             <td>{{order.clien"):
 OrdersComponent@28:6

are you using angular-cli ? latest version ? if not please tell me the angular2 version — Pardeep Jain
– Pardeep Jain, Commented Dec 4, 2016 at 13:01
I'm using newest angular2 version from github.com/angular/angular can't find exactly right version number in my repo And i have created my project from scratch. I have angular-cli but haven't used it for that project. — Krzysztof Skorupski
– Krzysztof Skorupski, Commented Dec 4, 2016 at 13:09

user3706927 · Accepted Answer · 2018-12-20 14:55:44Z

2

Most probably, you are using ngModule approach for your app if so than you are importing your pipe in incorrect way, you have to import your pipe in the module instead of your component i.e. orders component in your use case.

Try importing your pipe in higher module like this:

@NgModule({
  declarations: [FilterPipe,.... ],
  imports: [.... ],
  providers: [....],
  bootstrap: [AppComponent]
})
export class AppModule { }

P.S:- Moreover, you can also create your pipe as module to import this in more than one modules.

edited Dec 20, 2018 at 14:55

user3706927

6911 bronze badges

answered Dec 4, 2016 at 13:08

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krzysztof Skorupski Over a year ago

Many thanks! This resolved problem with first error, but still something is wrong

Günter Zöchbauer · Accepted Answer · 2016-12-04 13:08:08Z

2

Hint: There is no need to add @Injectable() when there is already @Pipe(), @Component(), or @Directive()

Ensure you have FilterPipe added to declarations: [FilterPipe] of your current module

or

added the module that has

declarations: [FilterPipe],
exports: [FilterPipe]

to imports: [...] of your current module.

answered Dec 4, 2016 at 13:08

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Aathreya · Accepted Answer · 2018-08-01 05:08:27Z

0

if you are using angular 4, then you do not need to specify pipes in you @Component.

answered Aug 1, 2018 at 5:08

Aathreya

5334 silver badges10 bronze badges

Collectives™ on Stack Overflow

angular2 error with pipe filter in component

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related