How to trigger pipe again in ionic?


#1

Hello ,is there anyway to trigger pipe in ionic? I have used pipe to show or hide button by this;

<ion-list  no-lines *ngFor="let item of mylist">
  <ion-card class="card">
    <ion-card-header>
      {{item.name}}
    </ion-card-header>
    <ion-card-content no-lines text-wrap>
      <button ion-button color="danger" (click)="ButtonClick1(item.id)" [class.hide]="item.startDate | checkinButtonEnablePipe: item.endDate">Test Button</button> 
    </ion-card-content>
  </ion-card>
</ion-list>

And pipe is ;

import { Pipe, PipeTransform } from '@angular/core';
import moment from "moment";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
/**
 * Generated class for the CheckinButtonEnablePipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: "checkinButtonEnablePipe"
})
export class CheckinButtonEnablePipe implements PipeTransform {
  transform(value: Date, value2: Date) {
    var dtstart = moment(value).format("YYYY/MM/DD, h:mm:ss a");
    var dtend = moment(value2).format("YYYY/MM/DD, h:mm:ss a");
    var dtnow = moment().format("YYYY/MM/DD, h:mm:ss a");
       if (dtnow >= dtstart && dtnow <= dtend)
        return false;
      else
        return true; 
  }
}

And I’m checking time by 5 minutes interval ,and want to show a button if time is between startdate and enddate.
Any help is appreciated ,thanks


#2

This is utter pipe abuse. Pipes are for transforming data from format A to format B. They should never have side effects like this.

If you need a periodic task to update your UI, look into the rxjs timer operator, and use it to modify a bound property in the controller.


#3

Use a component for this, not a pipe. Pipes have a special change detection algorithm, because it’s expected that they will be simple (pure). You’re asking for an impure pipe, more or less. The times I’ve had the most slowdown was when I used an impure pipe wrong. Sometimes you need an impure pipe – I was making a time-ago function – but in your use case, you don’t want a pipe.