title: Angular : Parser Error: Unexpected token -, expected identifier, keyword, or string
body: <p>I am using @angular~4.0.0 in my project, 
  I am displaying data in tabular form and wanted to add search control.  </p>
  
  <p>This codes works (with-out filter)</p>
  
  <pre><code>&lt;tr *ngFor="let item of components"&gt;
  </code></pre>
  
  <p><strong>but when I add below code for filter it throws error</strong></p>
  
  <pre><code>&lt;tr *ngFor="let item of components | filter-data:compName"&gt;
  </code></pre>
  
  <p><strong>Error :</strong></p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  TypeError: Unable to get property 'toUpperCase' of undefined or null reference ("
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tr [ERROR -&gt;]*ngFor="let item of components | filter-data:compName"&gt;
          &lt;!--&lt;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"&gt;
          &lt;!--&lt;tr *ngFor="let item of components"&gt;--&gt;
              &lt;td&gt; [ERROR -&gt;]&lt;a routerLink="/components"&gt; {{item.Component_ID}} &lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;{{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></pre>
  
  <h2><strong>Code</strong></h2>
  
  <p><strong>component-list.components.html</strong></p>
  
  <pre><code>&lt;input #compName placeholder="first name" /&gt;
      &lt;table id="myTable" class="display table table-striped"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Id&lt;/th&gt;
                  &lt;th&gt;Component Name&lt;/th&gt;
                  &lt;th&gt;Department&lt;/th&gt;
                  &lt;th&gt;Region&lt;/th&gt;
                  &lt;th&gt;Sector&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tr *ngFor="let item of components | filter-data:compName"&gt;
          &lt;!--&lt;tr *ngFor="let item of components"&gt;--&gt;
              &lt;td&gt; &lt;a routerLink="/components"&gt; {{item.Component_ID}} &lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;{{item.Component_Name}}&lt;/td&gt;
              &lt;td&gt;{{item.Sector}}&lt;/td&gt;
              &lt;td&gt;{{item.Region}}&lt;/td&gt;
              &lt;td&gt;{{item.Updated_By}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>filterdata.pipe.ts</strong></p>
  
  <pre><code>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 =&gt; it[field] == value);
      }
  }
  </code></pre>
  
  <p><strong>component-list.component.ts</strong></p>
  
  <pre><code>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 &amp; 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 =&gt; this.components = components, //Bind to view
                                  err =&gt; {
                                      // Log errors if any
                                      console.log(err);
                                  });
      }
  
       ngOnInit(){
              // Load comments
              this.loadComponents()
      }
  }
  </code></pre>
  
  <p>Appreciate your help.</p>