Unable to do searching using custom pipe created in angular 7

Question

How can i search in angular 7 using pipe (like filter in angular 1) ? Below is the code which i tried.But that returns only if exact match is there. But i need results which contains that word.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'search',
  pure:true
})
export class SearchPipe implements PipeTransform { 
  transform(data: any,searchTxt:string): any {
    if(!data || !searchTxt)
    {
      return data;
    }   
    return data.filter(function(x) {
      return x.name ==searchTxt}) ;    
   }`
}

i tried below code also but doesn't work

return data.filter(x=>x.name.toString().toLowerCase().indexof(searchTxt.toLowerCase()) !== -1)

This throws error: x.name.indexof is not a function

How can i do contains search using javascript\angular ?

There are some syntax errors in your code. Besides, indexof should be indexOf instead. — briosheje
– briosheje, Commented Aug 2, 2019 at 7:17

SiddAjmera · Accepted Answer · 2019-08-02 07:33:27Z

You should be using indexOf instead of === or indexof(which I think is a typo in your code).

Plus you should not be using a pipe to filter values. Here's why Angular doesn't recommend using pipes to filter or sort values.

Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification. Both filter and orderBy require parameters that reference object properties. Read more about that here.

That being said, you can basically write the logic to filter data, right inside your Component:

Here, give this a try:

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  users = [];
  filteredUsers = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("https://jsonplaceholder.typicode.com/users")
      .subscribe((users: any[]) => {
        this.users = users;
        this.filteredUsers = [...this.users];
      });
  }

  onSearchTextChange(searchString) {
    this.filteredUsers = [
      ...this.users.filter(user => user.name.indexOf(searchString) > -1)
    ];
  }
}

Here's a Working CodeSandbox Sample for your ref.

Collectives™ on Stack Overflow

Unable to do searching using custom pipe created in angular 7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related