Error while inserting pipe in component of angular 2 application

Question

I am working with Angular 2 and I have to create search filter. So I created a pipe with search logic and injected it in desired component. But while injecting, I am getting error.

This is code where i am injecting pipe,

import { FilterPipe} from '../filter.pipe'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', pipes: [FilterPipe], styleUrls: ['./dialog.component.css'] })

This is an error,

Argument of type '{ selector: string; templateUrl: string; pipes: typeof FilterPipe[]; styleUrls: string[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.

Please anyone, suggest me how to add pipe in component.

benshabatnoam · Accepted Answer · 2018-12-27 12:23:55Z

Your problem is that you're using a wrong property pipes in your @Component decorator:

@Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', pipes: [FilterPipe], // This line is wrong, pipes doesn't exists styleUrls: ['./dialog.component.css'] })

Actually the error does a good job saying that.

You need to change it to providers, like so:

@Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', providers: [FilterPipe], styleUrls: ['./dialog.component.css'] })

And inject it in the component's constructor like so:

constructor(private filterPipe: FilterPipe) { }

Created a simple StackBlitz DEMO for you to see this in action.

Prashant M Bhavsar · Accepted Answer · 2023-06-26 22:26:14Z

Can you post full code..it looks like there is mistake while importing custom pipe filter file.. You have to import custom pipe filter file in module of that component first then have to declare in declarations of module.. In module.ts file of that component

import {AdvancedFilterPipe} from './basic-filter.pipe'; //Declare pipe @NgModule({ imports: [DataTableModule, HttpModule, CommonModule, FormsModule, ChartModule, RouterModule], declarations: [ DashboardComponent, AdvancedFilterPipe], exports: [ DashboardComponent ], providers: [{provide: HighchartsStatic}] })

You can check below article for how to create and use custom pipe in Angular. http://musttoknows.com/create-custom-pipe-use-datatable-ngfor-angular/

Given simple way to use it..it save my time.

@benshabatnoam, can you please tell how its not relevant reply...he asked "Please anyone, suggest me how to add pipe in component.". Please suggest..Thanks
You've suggested to add the pipe to the module's declarations, but what's next? declaring the pipe is only the fist step. The question is how to use a pipe in a component.
@benshabatnoam.. Please check provided tutorial link, explained there how to use pipe..Thanks
10x @Prashant M Bhavsar, looked at your link, and found that this link (as for your answer) is a good example for using a pipe in the component's template. The thing is that this question is about 'how to use pipe in the component's code'

Collectives™ on Stack Overflow

Error while inserting pipe in component of angular 2 application

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related