title: How to filter using a toggle button in Angular
body: <p>I'm trying to display some data using an ngFor. I want to have a filter on the displayed data using a toggle.</p>
  
  <p>I have so far made the filter to work partially so far. Currently when I click on the toggle it indeed filters my data. For example: When I click on the toggle "Gym" it returns all the houses which has an amenity gym. But it does not filter the houses when i click on say more than one toggle e.g when i click on "Gym" and "Wifi" It should return a list of houses with both the amenity: Gym and Wifi</p>
  
  <p>I expect the filter to return a list of houses when I click on more than one toggle e.g when i click on "Gym" and "Wifi" It should return a list of houses with both the amenity: Gym and Wifi</p>
  
  <p>My Component is:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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;
    counter = 0;
    homes: Home[];
  
    filterArgs: any = { type: '', address: '', car_type: '', amenity: '' };
  
  
    amenities = [
      {
        'name': 'Wifi',
        'value': false
      },
      {
        'name': 'Gym',
        'value': false
      },
      {
        'name': 'Swimming Pool',
        'value': false
      },
      {
        'name': 'Garden',
        'value': false
      }
    ];
  
    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', 'Swimming Pool'],
          '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'
        }
      ];
  
    }
  
    amenityChange(item: any, e: any) {
      if (e.srcElement.checked === true) {
        console.log('checked');
        for (let i = 0; i &lt; this.amenities.length; i++) {
          if (this.amenities[i].name === item) {
            this.amenities[i].value = true;
          }
        }
      }
      if (e.srcElement.checked === false) {
        console.log('unchecked');
        this.counter = 0;
        for (let i = 0; i &lt; this.amenities.length; i++) {
          if (this.amenities[i].name === item) {
            this.amenities[i].value = false;
          }
        }
      }
      for (let j = 0; j &lt; this.amenities.length; j++) {
        if (this.amenities[j].value === true) {
          this.filterArgs.amenity = this.amenities[j].name;
          this.counter = 1;
        }
      }
      if (this.counter === 0) {
        this.filterArgs.amenity = '';
      }
    }
  
  }
  </code></pre>
  
  <p>My pipe is:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Pipe, PipeTransform } from '@angular/core';
  import { Home } from '../models/IHome.model';
  
  @Pipe({
      name: 'amenitiesFilter',
      pure: false
  })
  
  export class AmenitiesFilterPipe implements PipeTransform {
  
      transform(values: any[], filter: Home): any {
          /* console.log('amenities', values, filter); */
          if (!values || !filter || !filter.amenity) {
              return values;
          }
          return values.filter(item =&gt; {
              return item.amenity.indexOf(filter.amenity) !== -1;
          });
      }
  }
  </code></pre>
  
  <p>My template is:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;p *ngFor="let amenity of amenities"&gt;
     &lt;label&gt;{{ amenity.name }}&lt;/label&gt;
     &lt;label class="switch"&gt;
       &lt;input type="checkbox" id={{amenity.name}} name="amenities" (change)="amenityChange(amenity.name, $event)"&gt;                      
       &lt;span class="toggle round"&gt;&lt;/span&gt;
     &lt;/label&gt;
   &lt;/p&gt;
  
    &lt;ng-container *ngFor="let home of homes  | amenitiesFilter: filterArgs  
        | pricerangeFilter: 'price': min:max       
        | paginate: { itemsPerPage: 6, currentPage: p } "&gt;
  
              &lt;div class="homes" (click)="openDetails()"&gt;
                  &lt;img class="homes_content" src="{{ home.homeUrl }}" /&gt;&lt;br&gt;
                  &lt;div class="labels"&gt;
                      &lt;label&gt;&lt;i class="fa fa-map-marker fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;{{ home.address }}&lt;/label&gt;&lt;br&gt;
                      &lt;label&gt;&lt;i class="fa fa-money fa-fw"
                aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;{{ home.price | currency:"USD":"symbol" : "1.0"}}&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;hr&gt;
                  &lt;button class="details"&gt;&lt;i class="fa fa-tag fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;{{ home.type }}&lt;/button&gt;
                  &lt;label&gt;&amp;nbsp;SqFt:{{ home.area }}&lt;/label&gt;&lt;br&gt;
              &lt;/div&gt;
  
     &lt;/ng-container&gt;
     &lt;pagination-controls (pageChange)="p= $event" style="float:right"&gt;&lt;/pagination-controls&gt;
  </code></pre>