title: Asynchronous calls in Angular 4 Pipes
body: <p>I have a method on a service which fetches time from the server and I plan to use it in a custom pipe. The purpose of the pipe is to compare the the a timestamp to the current time and return it in human readable format.</p>
  
  <p><strong>Service</strong></p>
  
  <pre><code>export class TimeService{
    currentServerTime;
  
    fetchCurrentTimeStamp(){
       //http request using Observable
       return sendGETRequest(.....).map(data =&gt; {
          this.currentServerTime = data;
  
          return this.currentServerTime;
       })
    }
  }
  </code></pre>
  
  <p><strong>Pipe</strong></p>
  
  <pre><code>export class GetTimeFromNowPipe implements PipeTransform{
  
     fromNow;
     currentServerTime: number;
     constructor(private timeService: TimeService, private appSettings: AppSettings){}
  
     transform(value: number){
          var currentTime;
          this.timeService.fetchCurrentTimestamp().subscribe(data =&gt; {
              currentTime = data
              if(!value) return "";
  
              if(value){
                 let newDate = moment.unix(value);
                 this.fromNow = newDate.from(moment.unix(currentTime), true);
              }
            return this.fromNow;
          });
  
     }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor = "let model of models"&gt;
          &lt;span&gt;{{model.created | getTimeFromNow}}&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm stuck with the Async calls. How do I return the value from the pipe only after I fetch the data from the server?</p>