title: Click tab update filter pipe value Angular2
body: <p>This time, I am getting data from an API but I would like to filter it. Here is the login.
  People -> Filter by Status (Enable or disable)</p>
  
  <p>I have the following files</p>
  
  <ul>
  <li>people.component.ts</li>
  <li>people.component.html</li>
  <li>people.pipe.ts</li>
  </ul>
  
  <h2>JSON File</h2>
  
  <ul>
  <li>{"Name": "Ana","Status": "Enable"},</li>
  <li>{"Name": "Marcelo","Status": "Enable"},</li>
  <li>{"Name": "Rod","Status": "Disable"}</li>
  </ul>
  
  <h2>people.component.ts</h2>
  
  <pre><code>export class peopleComponent implements OnInit {
  
      /* General Variables */
      titlePage: string = "People";
      errorMessage: string;
      filterPeople: string  = "Enable";
  
      people: iPeople[]; // Call the service, this is fine 
  
      constructor(private _peopleService: peopleListService){
  
      }
      ngOnInit(): void {
      this._peopleService.getInfo()
          .subscribe(
              people =&gt; this.people = people,
              error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  }
  </code></pre>
  
  <h2>people.pipe.ts</h2>
  
  <pre><code>@Pipe({
      name: 'peopleTab'
  })
  export class peopleTabsPipe implements PipeTransform {
      transform(value: iPeopleList[], args: string[]): iPeopleList[] {
          let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
          return filter ? value.filter((people: iPeopleList) =&gt; people.Status.toLocaleLowerCase().indexOf(filter) != -1) : value;
      }
  }
  </code></pre>
  
  <h2>people.component.html</h2>
  
  <pre><code>&lt;template ngFor #person [ngForOf]="people | peopleTab:filterPeople"&gt;
        &lt;div class="Tabs"&gt;
              &lt;ul&gt;
                 &lt;li class="active" data-tab="1"&gt;&lt;a href="javascript:void(0);"&gt;Active&lt;/a&gt;&lt;/li&gt;
                 &lt;li data-tab="2"&gt;&lt;a href="javascript:void(0);"&gt;Past&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;div class="information"&gt;{{person.Name}} {{person.Status}}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <hr>
  
  <p>By default is filtered by "Enable" but I can't transfer a var to the past tab to change the value of the filter</p>