Angular2: date pipe with async pipe

Question

I'm setting this code in order to print out a subscription feed date field:

<div class="col-xs-8">
  <span class="text-light fs-mini m">
    {{((user$ | async).validation) | date: 'dd/MM/yyyy'}}
  </span>
</div>

Angular is telling me:

ERROR Error: Uncaught (in promise): TypeError: co.user is undefined

I've to say that the problem appears when I've added date pipe. (user$|async).valitation works fine without formatting.

Answer 1

((user$ | async).validation) resolves to undefined which is then passed to the date pipe.

I would suggest you resolve what either with a subscription in your component and then:

 <div class="col-xs-8">
  <span class="text-light fs-mini m">
    {{ user.validation | date: 'dd/MM/yyyy' }}
  </span>
</div>

Or something similar to this:

 <div class="col-xs-8">
  <span *ngIf="user$ | async" class="text-light fs-mini m">
    {{ user$.validation | async | date: 'dd/MM/yyyy' }}
  </span>
</div>

Or create a custom date pipe that accepts observables as parameters.

Answer 2

As of Angular 6 (I thinkl) You could use the as syntak too on the async.

 <div class="col-xs-8">
  <span *ngIf="user$ | async as user" class="text-light fs-mini m">
    {{ user.validation | date: 'dd/MM/yyyy' }}
  </span>
</div>

This article is worth a read Handling Observables with NgIf and the Async Pipe