title: Angular 2 filtering data using pipes
body: <p>I have to filter a lot of information on a page coming from a database. I need to filter this by town/county, parking, county and it needs to have a custom search field.</p>
  
  <p>The type of information coming in is this</p>
  
  <pre><code>[{
              "img-src": "../assets/img/admiralhouse.jpg",
              "name": "Admiral House",
              "town": "Fareham",
              "county":"Hampshire",
              "address": {
                  "firstline":"Admiral House",
                  "secondline":"43 High Street"
              },
              "parking":"Only on road",
              "contact":{
                  "name":"Donna Robinson",
                  "email":"donna.robinson@monkies.org.uk",
                  "phone":"02392793000"
              }
  
          },
          {
              "img-src": "../assets/img/allendalehouse.jpg",
              "name": "Allendale House",
              "address": {
                  "firstline":"Allendale House",
                  "secondline":"Hanham Road",
                  "town": "Wimborne",
                  "county":"Dorset"
              },
              "parking":"Only on road",
              "contact":{
                  "name":"Donna Robinson",
                  "email":"donna.robinson@monkies.org.uk",
                  "phone":"02392793000"
              }
          },
           {
              "img-src": "../assets/img/basepoint.jpg",
              "name": "Basepoint",
              "address": {
                  "firstline":"Basepoint Business Centre",
                  "secondline":"1 Winnall Valley Road",
                  "town": "Winchester",
                  "county":"Hampshire"
              },
              "parking":"Only on road",
              "contact":{
                  "name":"Donna Robinson",
                  "email":"donna.robinson@monkies.org.uk",
                  "phone":"02392793000"
              }
          }
          ];
  </code></pre>
  
  <p>From this information I need to be able to filter through it so that i can bring back only certain information  I have created a simple pipe that can ask if something is === to a string but how do I do this to multiple feilds and how do i get the information from the inputs into the pipe?</p>
  
  <p>My page with the input types</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {VenuesService} from './venues.service';
  import {Pipe} from 'angular2/core';
  
  @Pipe ({
      name:'search'
  })
  export class SearchPipe {
       transform(value) {
      return value.filter((item)=&gt; item == ('bye'));
  }
  } 
  
  
  
  
  @Component({
      selector: 'venues',
      template: `
  
      &lt;h1&gt; Venues &lt;/h1&gt;
  
      &lt;div id="filters"&gt;
  
          &lt;p class="selecttitle"&gt;search:&lt;/p&gt;
          &lt;input type="text" placeholder="search venues"&gt;
  
  
          &lt;h5 class="selecttitle"&gt; Town/city: &lt;/h5&gt;
  
          &lt;select&gt;
                  &lt;option value="All towns/cities"&gt;All towns/cities&lt;/option&gt;
  
                  &lt;option value="Alton"&gt;Alton&lt;/option&gt;
                  &lt;option value="Brockenhurst"&gt;Brockenhurst&lt;/option&gt;
                  &lt;option value="Dorchester"&gt;Dorchester&lt;/option&gt;
                  &lt;option value="Fareham"&gt;Fareham&lt;/option&gt;
                  &lt;option value="Havant"&gt;Havant&lt;/option&gt;
                  &lt;option value="Milton Keynes"&gt;Milton Keynes&lt;/option&gt;
                  &lt;option value="Old Trafford"&gt;Old Trafford&lt;/option&gt;
                  &lt;option value="Portsmouth"&gt;Portsmouth&lt;/option&gt;
                  &lt;option value="Wimborne"&gt;Wimborne&lt;/option&gt;
                  &lt;option value="Winchester"&gt;Winchester&lt;/option&gt;
  
  
  
          &lt;/select&gt;
  
          &lt;h5 class="selecttitle"&gt; County: &lt;/h5&gt;
  
          &lt;select&gt;
                  &lt;option value="All Counties"&gt;All towns/cities&lt;/option&gt;
  
                  &lt;option value="Buckinghamshire"&gt;Buckinghamshire&lt;/option&gt;
                  &lt;option value="Doreset"&gt;Doreset&lt;/option&gt;
                  &lt;option value="Greater Manchester"&gt;Greater Manchester&lt;/option&gt;
                  &lt;option value="Hampshire"&gt;Hampshire&lt;/option&gt;
  
  
          &lt;/select&gt;
  
          &lt;h5 class="selecttitle"&gt; Car parking availability: &lt;/h5&gt;
  
          &lt;select&gt;
                  &lt;option value="any"&gt;Any&lt;/option&gt;
                  &lt;option value="Onsite car park"&gt;Onsite car park&lt;/option&gt;
                  &lt;option value="Only on road"&gt;Only on road&lt;/option&gt;
                  &lt;option value="none"&gt;none&lt;/option&gt;
  
  
  
          &lt;/select&gt;
  
  
  
      &lt;/div&gt;
  
      &lt;div id="venues"&gt;
  
       &lt;ul&gt;
          &lt;li *ngFor="#venue of venues"&gt; {{ venue.name }}
          &lt;/li&gt;
       &lt;/ul&gt;
  
      &lt;/div&gt;
  
  
  
  
  
  
  `,
  providers:[VenuesService],
  pipes:[SearchPipe],
  
  
  })
  </code></pre>
  
  <p>Sorry this is a huge chunk of code but i wanted you to have any information you need. so pretty much how do I do proper filtering in Angular 2.</p>