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.

Answer 1

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.

Answer 2

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.