How can I perform a search on a list on button (click) using Angular?

Question

I am using Angular 6 to do a search on my list. Right now the code I have does the search correctly when I type some text in the input search box. However, I want the search to be performed after I have clicked on the button. How can I achieve this?

I expect the filter to work after clicking on the button and not when typing in the input filed.

import { Component, OnInit } from '@angular/core';
import { Home } from '../../models/IHome.model';

@Component({
  selector: 'app-search',
  templateUrl: './homes.component.html',
  styleUrls: ['./homes.component.css']
})

export class HomesComponent implements OnInit {

  defaultSelection = 'All';
  searchText: any;
  address: string;

  homes: Home[];
  filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };

 

  constructor() {  }

  ngOnInit() {
  

    this.homes = [
      {
        'id': 1,
        'type': 'Villa',
        'price': 920000,
        'address': 'CMC',
        'area': 6292,
        'bedrooms': 2,
        'bathrooms': 2,
        'car_type': 'Cars',
        'park_spots': 1,
        'amenity': 'Gym',
        'homeUrl': '../../assets/ezembil10.jpg'
      },
      {
        'id': 2,
        'type': 'Apartment',
        'price': 3000,
        'address': 'Summit',
        'area': 921,
        'bedrooms': 3,
        'bathrooms': 1,
        'car_type': 'Cars',
        'park_spots': 2,
        'amenity': 'Wifi',
        'homeUrl': '../../assets/ezembil6.jpg'
      },
      {
        'id': 3,
        'type': 'Villa',
        'price': 820000,
        'address': 'Hayat',
        'area': 4921,
        'bedrooms': 2,
        'bathrooms': 2,
        'car_type': 'Trucks',
        'park_spots': 3,
        'amenity': 'Garden',
        'homeUrl': '../../assets/ezembil8.jpg'
      },
      {
        'id': 4,
        'type': 'Apartment',
        'price': 420000,
        'address': 'Sarbet',
        'area': 3921,
        'bedrooms': 2,
        'bathrooms': 3,
        'car_type': 'Cars',
        'park_spots': 4,
        'amenity': 'Swimming Pool',
        'homeUrl': '../../assets/ezembil1.jpg'
      },
      {
        'id': 5,
        'type': 'Villa',
        'price': 629000,
        'address': 'Mekhanisa',
        'area': 2921,
        'bedrooms': 1,
        'bathrooms': 1,
        'car_type': 'Vans',
        'park_spots': 1,
        'amenity': 'Gym',
        'homeUrl': '../../assets/ezembil6.jpg'
      },
      {
        'id': 6,
        'type': 'Apartment',
        'price': 720000,
        'address': 'Bole',
        'area': 1921,
        'bedrooms': 3,
        'bathrooms': 3,
        'car_type': 'Bikes',
        'park_spots': 1,
        'amenity': 'Gym',
        'homeUrl': '../../assets/ezembil5.jpg'
      }
    ];

  }

  searchList(row: any) {
    if (this.searchText) {
      const propVal = row[this.searchText.toLowerCase()] + '';
      if (propVal) {
        return propVal.toUpperCase().indexOf(this.searchText.toUpperCase()) > -1;
      } else {
        return false;
      }
    }
    return true;
  }

  searchFilter() {
    /* this.searchList = this.searchText; */
    if (this.address !== '') {
      this.homes = this.homes.filter(res => {
        return res.address.toLowerCase().match(this.address.toLowerCase());
      });
    } else if (this.address === '') {
      this.ngOnInit();
    }
  }

}

<!DOCTYPE html>
<div id="showcase">
  <header>
    <nav class='cf'>
      <ul class='cf'>
        <li>
          <a href="#">eZembil</a>
        </li>
        <div class="nav_menu">
          <li>
            <a routerLink="/properties">Properties</a>
          </li>          
          <li class="prop">
            <input type="text" class="input input_button" [(ngModel)]="address" placeholder="Search by location"
              (input)="searchFilter()">
            <button type="submit" class="btn_search input_button" style="border:none;height:30px"
              (click)="searchFilter()">
              <i class="fa fa-search"></i></button>
          </li>
        </div>
      </ul>
      <a href=' #' id='openup'>MENU</a>
    </nav>
  </header>
</div>


<section class="main-content">
  <div class="main">

    <ng-container *ngFor="let home of homes | paginate: { itemsPerPage: 6, currentPage: p }">

      <div class="homes" (click)="openDetails()">
        <img class="homes_content" src="{{ home.homeUrl }}" /><br>
        <div class="labels">
          <label><i class="fa fa-map-marker fa-fw" aria-hidden="true"></i>&nbsp;{{ home.address }}</label><br>
          <label><i class="fa fa-money fa-fw"
              aria-hidden="true"></i>&nbsp;{{ home.price | currency:'USD':'symbol' : '1.0'}}</label>
        </div>
        <hr>
        <button class="details"><i class="fa fa-tag fa-fw" aria-hidden="true"></i>&nbsp;{{ home.type }}</button>
        <label>&nbsp;SqFt:{{ home.area }}</label><br>
      </div>

    </ng-container>



  </div>
  <pagination-controls (pageChange)="p= $event" style="float:right"></pagination-controls>
</section>

Where is the input in your template code? It seems to be missing from your sample. — Ashley
– Ashley, Commented May 9, 2019 at 12:26

Ashley · Accepted Answer · 2019-05-09 13:11:57Z

1

<input 
    type="text" 
    class="input input_button" 
    [(ngModel)]="address" 
    placeholder="Search by location"> 

<button 
    type="button" 
    class="btn_search input_button" 
    style="border:none;height:30px" 
    (click)="searchFilter()"> 

    <i class="fa fa-search"></i>
</button>

If you remove (input)="searchFilter()" from your input your code should only search on button click.

The button should also be of type "button":

With the type button the button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur whereas with the type submit it tries to make a form submit action.

edited May 9, 2019 at 13:11

answered May 9, 2019 at 12:30

Ashley

9171 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emmon Over a year ago

If i remove the (input)="searchFilter()" it does not work at all, no filter is performed

Ashley Over a year ago

I edited, I didn't realize that your type was "submit" on the button. It should be "button".

Collectives™ on Stack Overflow

How can I perform a search on a list on button (click) using Angular?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related