How to create a filter component in Angular

Question

There are hundreds of articles and code snippets on the internet. But I'm sorry that I'm not able to implement any one of them correctly. I've followed these study materials:

1. Filtering in AngularJS
2. Filtering in Angular
3. Angular filters: w3schools
4. JavaScript Array filter() Method

I also came across: ng-repeat="data in myController.data | filter:{filterFlag:'true'}". But I don't understand this approach.

Instead of pasting the code here I thought creating a stackblitz will be more helpful.

I also tried understanding the concept from this code. But this was ReactJs code so I got myself more confused.

I'm not getting any error or warning. My code returns the entire array (from which I'm trying to filter) or nothing at all. I'm not able to the understand the concept very well.

Dear community, don't write the code for me. but please point out my mistakes or suggest so that I can correct them.

The filter should work for both username or location (so that I can show all users who belong to same location).

Answer 1

card.component.ts

import { Component, OnInit } from '@angular/core';

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

  /* an array of user objects*/
  users=[
    { id: 1, name: "Leanne Graham", username: "Bret", location: "India" },
    { id: 2, name: "Ervin Howell", username: "Antonette", location: "Australia" },
    { id: 3, name: "Clementine Bauch", username: "Samantha", location: "China" },
    { id: 4, name: "Patricia Lebsack", username: "Karianne", location: "On_my_couch" },
    { id: 5, name: "Chelsey Dietrich", username: "Kamren", location: "America" },
    { id: 6, name: "Mrs. Dennis Schulist", username: "Leopoldo_Corkery", location: "Peru" },
    { id: 7, name: "Kurtis Weissnat", username: "Elwyn.Skiles", location: "China" },
    { id: 8, name: "Nicholas Runolfsdottir V", username: "Maxime_Nienow", location: "India" },
    { id: 9, name: "Glenna Reichert", username: "Delphine", location: "India" },
    { id: 10, name: "Clementina DuBuque", username: "Moriah.Stanton", location: "America" }
  ];
  text = '';

  constructor() { }

  // findUsers(username) {
  //   return user => username; 
  // }

 searchFunction(text) {
  console.log( this.users.filter(e => {
    return e.username.toLowerCase() === text.toLowerCase() ||
            e.username.toLowerCase().indexOf(text.toLowerCase()) >= 0
            || e.location.toLowerCase() === text.toLowerCase() ||
            e.location.toLowerCase().indexOf(text.toLowerCase()) >= 0 ;
  }));
}

  ngOnInit() { 
  }
}

card.component.html

<p>
card works!
</p>


<input type="search" placeholder="Search" [(ngModel)]='text'>
<button (click)="searchFunction(text)">Search</button>

Stackblitz

Answer 2

Here are the mistakes you do:

1. The value you enter in to search is not bound to a variable in your component. Let's bind it to the searchText variable.

   <input type="search" placeholder="Search" [(ngModel)]='searchText'>
   

2. Your filter callback function can be declared as an Arrow function right within the filter call. This will let you access your search string via this and write the search comparator right there.

   If you still want your callback function to be a conventional function outside the filter call, bind it with the component context.

   console.log( this.users.filter(this.findUsers.bind(this)));
   

   This will enable the callback function to access the this context of the component.

3. Now write the correct filter string.

   return user.username.toLowerCase().indexOf(this.searchText.toLowerCase()) >= 0
   

Answer 3

I didn't tested it but it should work. Give it a try

<input type="search" placeholder="Search" #searchtext>
<button (click)="searchFunction(searchtext.value)">Search</button>

COMPONENT

searchFunction(search) {
console.log( this.users.filter(value=> {
return value.username == search || value.location == search
}));

}