Import not working with Angular2 custom pipes

Question

Here is the custom pipe:

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

    @Pipe({
        name: 'gridColumnFilter'
        })

    @Injectable()
    export class GridColumnFilter implements PipeTransform {
        transform(columns: any, args: any[], header: string): any {
            return columns.find(columns.find(x => x.header == header))
    }
    }

    @NgModule({
        declarations: [
            GridColumnFilter
        ],
        exports: [
            GridColumnFilter
        ]
    })
    export class GridColumnFilterModule { }

Here is my Module that I am importing to:

import { GridColumnFilter } from '../../../pipes/grid-column-filter';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
        declarations: [GridColumnFilter],
        imports: [CommonModule, NgModule, CommonModule],
        exports: []
    })

    export class DigitalLinksModule{ }

Here is the html:

<p-column *ngFor="let col of viewState.parameterGridOptions.cols | GridColumnFilter:viewState.parameterGridOptions.cols:col.header" [field]="col.field" [header]="col.header" [sortable]="col.sortable"></p-column>

I am getting the error:

The pipe 'GridColumnFilter' could not be found ("
<p-column *ngFor="let[ERROR ->] col of viewState.parameterGridOptions.cols | GridColumnFilter:viewState.parameterGridOptions.cols:co")

Haven't found a solution. Thanks in advance.

Answer 1

The comment re: typo is correct, the pipe name is case sensitive.

Also rather than the GridColumnFilterModule, you might want to consider putting all pipes in a shared module as described in the doco on Angular Modules , then importing that shared module into the DigitalLinksModule (and any other modules that want the pipe).

I don't think the custom pipe needs to be marked as @Injectable (at least I haven't seen that before).