Search code examples
angularangular-pipe

Angular2 Pipe can't find the name


I made a Pipe as follow:

import {Pipe, PipeTransform} from '@angular/core';
import { Radio } from '../../models/radio';
@Pipe({
    name: 'radioFilter'
})
export class radioFilterPipe  implements PipeTransform {

    transform(value: Radio[], args: string[]): any {

        let filter = args[0].toLocaleLowerCase();
        return filter ? value.filter(radio => radio.station.text.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

and in my component I added the following code:

import { radioFilterPipe } from './grid.station.pipe';

// pipes: [radioFilter],

but I get a compile error:

error TS2304: Cannot find name 'radioFilter'. What am I doing wrong??


Solution

  • As per Angular 2 final release, you have to include Pipe, Component, Directive into declarations option of NgModule metadata.

    @NgModule({
         declarations: [MyDirective, MyComponent, radioFilterPipe ],
         providers: [radioFilterPipe], //<-- Include pipe here if you want to use it in class as dependency
         imports: [ AppModule]
    })
    

    While including pipe name in pipes array, it should be class name radioFilterPipe

    import { radioFilterPipe } from './grid.station.pipe';
    
    @Component({
      ..,
      pipes: [radioFilterPipe ],
      ..
    })