Angular 7 Pipes

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public searchTerm: string = '';
  
  // List of users data
  public userData: Array<any> = [{
    "id": 1,
    "first_name": "Hyacinth",
    "last_name": "Clemens",
    "country": "France",
    "gender": "Male",
    "age": 49
  }, {
    "id": 2,
    "first_name": "Minnaminnie",
    "last_name": "Leppo",
    "country": "Ukraine",
    "gender": "Female",
    "age": 30
  }, {
    "id": 3,
    "first_name": "Maisey",
    "last_name": "Entwisle",
    "country": "Slovenia",
    "gender": "Male",
    "age": 32
  }, {
    "id": 4,
    "first_name": "Lynnett",
    "last_name": "Tarry",
    "country": "Indonesia",
    "gender": "Male",
    "age": 38
  }, {
    "id": 5,
    "first_name": "Waylin",
    "last_name": "Melia",
    "country": "Thailand",
    "gender": "Female",
    "age": 38
  }, {
    "id": 6,
    "first_name": "Novelia",
    "last_name": "Flory",
    "country": "China",
    "gender": "Male",
    "age": 38
  }, {
    "id": 7,
    "first_name": "Eadith",
    "last_name": "Zellmer",
    "country": "Philippines",
    "gender": "Female",
    "age": 31
  }, {
    "id": 8,
    "first_name": "Donielle",
    "last_name": "Pipkin",
    "country": "Mali",
    "gender": "Male",
    "age": 51
  }, {
    "id": 9,
    "first_name": "Hagan",
    "last_name": "Devenny",
    "country": "Thailand",
    "gender": "Female",
    "age": 62
  }, {
    "id": 10,
    "first_name": "Darice",
    "last_name": "Ianniello",
    "country": "Brazil",
    "gender": "Male",
    "age": 60
  }]
}