title: Angular: Search bar in TypeScript table
body: <p>I have done a simple CRUD application, now I have to add a Search Bar that filters my table and show me the rows with the same letters that I digit.</p>
  
  <p>I don't know what to do in my component, I saw different things with pipes and filter but I couldn't adapt them to my project.</p>
  
  <p>I would like to know if there is a method that I can implement to my component.ts without creating a new one.</p>
  
  <p>COMPONENT.HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul class="table-wrapper"&gt;
      &lt;div class="table-title"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;button *ngIf="metadata &amp;&amp; metadata.addMD" (click)="addFunc(metadata)"&gt;{{metadata.addMD.label}}&lt;/button&gt;
            &lt;div class="show-entries"&gt;
              &lt;span&gt;Show&lt;/span&gt;
              &lt;label&gt;
                &lt;select [(ngModel)]="pageSize"&gt;
                  &lt;option *ngFor="let maxPerPage of rowsOnPageSet"
                          (click)="maxElements(maxPerPage)"&gt;{{maxPerPage}}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/label&gt;
              &lt;span&gt;users&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-4"&gt;
            &lt;h2 class="text-center"&gt;Users &lt;b&gt;Details&lt;/b&gt;&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-4"&gt;
            &lt;div class="search-box"&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;&lt;i class="material-icons"&gt;&amp;#xE8B6;&lt;/i&gt;&lt;/span&gt;
  --&gt; //HERE I HAVE TO ADD THE FUNCTION OR SOMETHING ELSE
               &lt;input type="text" class="form-control" [(ngModel)]="searchVal"
                   (ngModelChange)='checkSearchVal()'  placeholder="Search&amp;hellip;"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table class="table table-bordered"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th *ngFor="let col of columns" (click)="sortTable(col)"&gt;{{col}}
            &lt;i *ngIf="col === columnSorted &amp;&amp; !direction" class="material-icons"&gt;keyboard_arrow_up&lt;/i&gt;
            &lt;i *ngIf="col === columnSorted &amp;&amp; direction" class="material-icons"&gt;keyboard_arrow_down&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr *ngFor="let user of users | paginate: {itemsPerPage: pageSize,
                                                 currentPage: page,
                                                 totalItems: users.length}"&gt;
          &lt;td *ngFor="let col of columns"&gt;{{user[col]}}&lt;/td&gt;
          &lt;td&gt;
            &lt;button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
                    (click)="actionFunc(act, user)"&gt;{{act.label}}&lt;/button&gt;
  
          &lt;/td&gt;
  
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;div align="center"&gt;
        &lt;!--&lt;div class="hint-text"&gt;Showing &lt;b&gt;{{totUsersPerPage}}&lt;/b&gt; out of &lt;b&gt;{{users.length}}&lt;/b&gt; entries&lt;/div&gt;--&gt;
        &lt;ul align="center"&gt;
          &lt;pagination-controls (pageChange)="pageChanged($event)"&gt;&lt;/pagination-controls&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>COMPONENT.TS, here I have to create the right method that works for my app.</p>
  
  <pre><code>    export class DynamicTableComponent implements OnInit {
  
    constructor(private userService: UserService,
                private resourcesService: ResourcesService,
                private router: Router) {
    }
  
    @Input()
    users = [];
    @Input()
    columns: string[];
    @Input()
    actions = [];
    @Input()
    metadata: any;
    @Input()
    class;
  
    direction = false;
    columnSorted = '';
    public rowsOnPageSet = ['5', '10', '15', '20', '25'];
    page = 1;
    private pageSize = 5;
    searchVal = '';
  
    /*totalPages = Math.trunc(this.users.length / this.pageSize);
    totUsersPerPage = this.pageSize;*/
  
    ngOnInit() {
    }
  
    actionFunc(action, element: any) {
      if (action.actionType === 'DELETE') {
          /*...*/
        }
      }
      if (action.actionType === 'GO_TO') {
          /*...*/
      }
    }
  
    addFunc(metadata) {
      if (metadata.addMD.actionType === 'ADD_TO') {
         /*...*/
      }
    }
  
    maxElements(maxPerPage) {
      this.rowsOnPageSet = maxPerPage;
    }
  
    sortTable(param) {
      /*...*/
    }
  
    getClassCondition(act) {
      return act === 'DELETE' ? this.class = 'btn btn-danger' : 'btn btn-primary';
    }
  
    pageChanged($event: number) {
       /*...*/
    }
  
  checkSearchVal() {
      this.users.slice();
      const filteredUsers: User[] = [];
      if (this.searchVal &amp;&amp; this.searchVal !== '') {
        for (const selectedUser of this.users) {
          if (selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase()) !== -1 ||
            selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase()) !== -1) {
            filteredUsers.push(selectedUser);
          }
        }
        this.users = filteredUsers.slice();
      }
    }
  
  }
  </code></pre>
  
  <p>DATA STRUCTURE:
  in.memory-data.service.ts</p>
  
  <pre><code>import { InMemoryDbService } from 'angular-in-memory-web-api';
  import { User } from './user';
  import { Injectable } from '@angular/core';
  
  export const COLUMNS = ['id', 'firstName', 'lastName', 'age'];
  
  @Injectable({
    providedIn: 'root',
  })
  export class InMemoryDataService implements InMemoryDbService {
    createDb() {
      const USERS = [
        {id: 1, firstName: 'NAME_1', lastName: 'SURNAME_1', age: 23},
        {id: 2, firstName: 'NAME_2', lastName: 'SURNAME_2', age: 23},
        {id: 3, firstName: 'NAME_3', lastName: 'SURNAME_3', age: 23},
        {id: 4, firstName: 'NAME_4', lastName: 'SURNAME_4', age: 24},
        {id: 5, firstName: 'NAME_5', lastName: 'SURNAME_5', age: 42},
        {id: 6, firstName: 'NAME_6', lastName: 'SURNAME_6', age: 41},
        {id: 7, firstName: 'NAME_7', lastName: 'SURNAME_7', age: 24},
        {id: 8, firstName: 'NAME_8', lastName: 'SURNAME_8', age: 25},
        {id: 9, firstName: 'NAME_9', lastName: 'SURNAME_9', age: 25},
        {id: 10, firstName: 'NAME_10', lastName: 'SURNAME_10', age: 25},
        {id: 11, firstName: 'NAME_11', lastName: 'SURNAME_11', age: 22},
        {id: 12, firstName: 'NAME_12', lastName: 'SURNAME_12', age: 22},
        {id: 13, firstName: 'NAME_13', lastName: 'SURNAME_13', age: 24},
      ];
      return {USERS};
    }
  }
  </code></pre>
  
  <p>user.ts</p>
  
  <pre><code>export class User {
    id: number;
    firstName: string;
    lastName: string;
    age: number;
  }
  </code></pre>