title: Angular 2 pipe/filter with component variable
body: <p>i have app that shows events from this and next week. Weeks are switched by two buttons. I need filter/pipe that will show only events from current active week. I had this filter in Angular 1 and everything was working but in An 2 I am not able to get this filter work. See code:</p>
  
  <pre><code>    @Page({
      templateUrl: 'build/pages/lunches/lunches.html',
      providers: [LunchService, HTTP_PROVIDERS],
  })
  
  export class Lunches {
      weekDuration:number = 24 * 60 * 60 * 7 * 1000;
      timestampFix:number = 24 * 60 * 60 * 4 * 1000;
  
      currentWeekNumber:number = parseInt(new Date().getTime() / this.weekDuration);
      nextWeekNumber:number = this.currentWeekNumber + 1;
      activeWeekNumber:string = '2408';
      lunches:Array;
      activeLunches:Array;
      noData:boolean = true;
  
      constructor(private lunchService:LunchService) {
      }
  
      ngOnInit() {
          this.loadLunches();
      }
  
      loadLunches() {
          this.lunchService.getLunchList().subscribe(
              data =&gt; {
                  var lunches = data;
                  lunches.forEach((item, index) =&gt; {
                      lunches[index].date = new Date(item.date);
                  });
                  this.lunches = lunches;
                  this.weekFilter();
              }
          );
      }
  
      weekFilter() {
          var activeLunches = [];
          this.lunches.forEach((item, index) =&gt; {
              var lunchDate = new Date(item.date).getTime() - this.timestampFix;
              console.log(this.currentWeekNumber, ' = ', parseInt(lunchDate / this.weekDuration));
              if (this.activeWeekNumber == parseInt(lunchDate / this.weekDuration)) {
                  this.noData = false;
                  activeLunches.push(item);
              }
          });
          this.activeLunches = activeLunches;
      }
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div padding&gt;
      &lt;ion-segment [(ngModel)]="activeWeekNumber" (click)="weekFilter()"&gt;
          &lt;ion-segment-button value="{{currentWeekNumber}}" selected&gt;
              This week
          &lt;/ion-segment-button&gt;
          &lt;ion-segment-button value="{{nextWeekNumber}}"&gt;
              Next
          &lt;/ion-segment-button&gt;
      &lt;/ion-segment&gt;
  &lt;/div&gt;
  &lt;ion-card *ngIf="noData"&gt;
      &lt;ion-card-content&gt;
          No lunches for this week.
      &lt;/ion-card-content&gt;
  &lt;/ion-card&gt;
  &lt;ion-card *ngFor="#lunch of activeLunches"&gt;
      &lt;ion-card-header&gt;
          &lt;h2&gt;{{lunch.date | date: "E d. M."}}&lt;/h2&gt;
      &lt;/ion-card-header&gt;
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>That is my actual code that doesnt work well, and i think its bad solutions. I tried write that as pipe but i wasnt able to acces and change variable noData.</p>
  
  <p>EDIT: Based on comments, i decide to use this solution, but there is problem how to trigger weekFilter function everytime when activeWeekVariable change. Any ideas?</p>