not work pipe for search

Question

i create pipe for search . when user select complete from selectbox it show complete products and when select the uncomplete show uncomplete product but when i use this code it not show me this Error :

Unhandled Promise rejection: Template parse errors: The pipe 'SearchCompletePipe' could not be found (" ]task of tasks | SearchCompletePipe:SearchCompletePipe; let index=index" [task]="task">Loading . . .

this my code :

Pipe :

    import { Pipe, PipeTransform } from '@angular/core';
import { Task } from '../task/task-list/task';

@Pipe({
    name: 'search-complete'
})

export class SearchCompletePipe implements PipeTransform {

    transform(tasks: Task[], args?: any): any {

        if (!tasks) {
            return tasks;
        }

        let complete = args[0];
        return tasks.filter((task: Task) => task.complete == complete)

    }

}

task-List :

    import { Component, OnInit,Output } from '@angular/core';
import { Task } from './task';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {

    complete: boolean = false;
    @Output() tasks: Task[];
    constructor() {
        this.tasks = [
            new Task(1, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(2, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(3, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(4, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),

        ];
    }

  ngOnInit() {
  }

}

task.html:

<app-task-item 
               *ngFor="let task of tasks | complete:SearchCompletePipe ; let index=index"
               [task]="task"
               >Loading . . .</app-task-item>

task-item :

    import { Component, OnInit, Input } from '@angular/core';
import { Task } from '../task';

@Component({
    selector: 'app-task-item',
    templateUrl: './task-item.component.html',
    styleUrls: ['./task-item.component.css']
})
export class TaskItemComponent implements OnInit {

    @Input() task: Task;

    constructor() { }

    ngOnInit() {
    }

}

task.html:

<td class="col-lg-1">{{task.id}}</td>
<td class="col-lg-2">{{task.name}}</td>
<td class="col-lg-6">{{task.description}}</td>
<td class="col-lg-3">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-xs btn-info">edit</button>
    <button type="button" class="btn btn-xs btn-danger">delete</button>
    <button type="button" class="btn btn-xs btn-success">done</button>
  </div>
</td>

Please re-read the guidance, that usage is not correct: https://angular.io/guide/pipes — jonrsharpe, Jun 24 '17 at 13:40
is your true code?, look the error and search it in your code, the more similiar code is in ```task.html``` but not equal. — Pablo Cesar Cordova Morales, Jun 24 '17 at 13:52
no its not true . i ask the question for find wrong part in my code — کیانوش, Jun 24 '17 at 14:06

score 0 · Answer 1 · answered Jun 24 '17 at 15:02

0

The pipe could not be found error means you have forgotten to introduce it:

@NgModule({
  declarations: [
    SearchCompletePipe
  ]

answered Jun 24 '17 at 15:02

VahidN

18,457
8
73
117

i add this but still show me error : `declarations: [ AppComponent, TaskComponent, TaskListComponent, TaskItemComponent, SearchCompletePipe, TaskDetailComponent ]` – کیانوش Jun 24 '17 at 16:32

developer033 · Accepted Answer · 2017-06-24T19:24:01.480

You should use the name of pipe that you've declared on your Pipe decorator:

In your case, it's search-complete:

@Pipe({
  name: 'search-complete'
})

So, in template

<app-task-item *ngFor="let task of tasks | search-complete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

Wait! it doesn't work either. Why?

Because it gives template parse errors.

I really can't tell the reason, but I'm almost sure that Angular doesn't accept special characters (like dash, underscore, etc...) on name metada of @Pipe decorator.

Solution?

Use camelCase. So, instead of search-complete you must use something like searchComplete (it's more readable also :) )

Pipe:

@Pipe({
  name: 'searchComplete'
})

Template

<app-task-item *ngFor="let task of tasks | searchComplete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

Additional notes:

1 - Actually you're treating the parameter of the pipe as an array (on your transform function), but you're passing a single variable. To make it working you can wrap the complete param with brackets, like this (and keep the pipe as before):

<app-task-item *ngFor="let task of tasks | searchComplete: [complete]; let i = index"
               [task]="task">
  Loading...
</app-task-item>

or you can keep the HTML as before and make changes in pipe:

export class SearchCompletePipe implements PipeTransform {

  transform(tasks: Task[], complete: any): any { // Type complete as boolean?  
    if (!tasks) {
      return tasks;
    }

    return tasks.filter((task: Task) => task.complete === complete)    
  }    
}

2 - Don't forget to add SearchCompletePipe in your declarations array in your NgModule.

not work pipe for search

2 Answers2