Angular : Parser Error: Unexpected token -, expected identifier, keyword, or string

I am using @angular~4.0.0 in my project, I am displaying data in tabular form and wanted to add search control.

This codes works (with-out filter)

<tr *ngFor="let item of components">

but when I add below code for filter it throws error

<tr *ngFor="let item of components | filter-data:compName">

Error :

Unhandled Promise rejection: Template parse errors:
TypeError: Unable to get property 'toUpperCase' of undefined or null reference ("
            </tr>
        </thead>
        <tr [ERROR ->]*ngFor="let item of components | filter-data:compName">
        <!--<tr *ngFor="let item of componen"): ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 32 in [let item of components | filter-data:compName] in ng:///App/PortalComponents/ComponentList/component-list.component.html@14:12 ("nts | filter-data:compName">
        <!--<tr *ngFor="let item of components">-->
            <td> [ERROR ->]<a routerLink="/components"> {{item.Component_ID}} </a></td>
            <td>{{item.Component_Name}}"): ng:///App/PortalComponents/ComponentList/component-list.component.html@16:17, Directive RouterLinkWithHref
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 32 in [let item of comp
   "Unhandled Promise rejection:"

Code

component-list.components.html

<input #compName placeholder="first name" />
    <table id="myTable" class="display table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Component Name</th>
                <th>Department</th>
                <th>Region</th>
                <th>Sector</th>
            </tr>
        </thead>
        <tr *ngFor="let item of components | filter-data:compName">
        <!--<tr *ngFor="let item of components">-->
            <td> <a routerLink="/components"> {{item.Component_ID}} </a></td>
            <td>{{item.Component_Name}}</td>
            <td>{{item.Sector}}</td>
            <td>{{item.Region}}</td>
            <td>{{item.Updated_By}}</td>
        </tr>
    </table>

filterdata.pipe.ts

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

@Pipe({
    name: 'filter-data'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] {  
        if (!items) return [];        
        return items.filter(it => it[field] == value);
    }
}

component-list.component.ts

import { Component }        from  '@angular/core';
import { Router }           from '@angular/router';
import { Pipe } from '@angular/core';

// Observable class extensions
import 'rxjs/add/observable/of';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

// Component & Service
import { ComponentsModel  }  from '../../Model/Component/components.model'
import { ComponentsService }  from '../../Services/Components/components.service'


@Component({
    moduleId : module.id,
    selector : 'component-list',
    templateUrl : 'component-list.component.html',
    providers: [ComponentsService]
})
export class ComponentListComponent{

    constructor(
        private componentservice: ComponentsService,
        private router: Router
    ){}
    //Local Properties
    components: ComponentsModel[];

    loadComponents(){
        // Get all comments
         this.componentservice.GetComponents()
                           .subscribe(
                               components => this.components = components, //Bind to view
                                err => {
                                    // Log errors if any
                                    console.log(err);
                                });
    }

     ngOnInit(){
            // Load comments
            this.loadComponents()
    }
}

Appreciate your help.