how to display data in template when using Observable array in Angular

Question

My question is how I can display data in the template if the observable after filtered does not return any data. The observable showed below retrieves data from the firebase realtime db if the filter condition is met. It works when data is obtained. What I need is to display the data when the observable does not return the data. I have commented below the data i want to show. Thank you

Eventdata: Observable<any[]>;

this.Eventdata = this.upSvc.getUserEvents(this.authentication.currentUserId)
  .map(items => items.filter(item => item.eventId == this.eventId))
  .filter(items => items && items.length > 0);
  console.log(this.Eventdata);

 <div *ngIf="Eventdata === undefined;else dataAfterValue;">
  <div *ngFor="let item of Eventdata | async"> 
     <button type="button" [disabled]="item.attending" 
        (click)="AttendEvent(evenDetails.EventId)" class="btn btn-primary 
        font-weight-light ">
       {{item.attending? 'Already Registered' : 'Register'}} 
       <i class="fa fa-check" aria-hidden="true"></i>
     </button>

     <button type="button" *ngIf="item.attending"  
        (click)="AttendEvent(evenDetails.EventId)" class="btn btn-danger 
        font-weight-light ">
        Cancel Attendance
        <i class="fa fa-check" aria-hidden="true"></i>
     </button> 
     <button type="button"   (click)="shareEvent()" class="btn btn-info 
        font-weight-light ">
        Share
        <i class="fa fa-share-alt" aria-hidden="true"></i>
     </button>
     <button type="button"  [disabled]="item.bookmarked" 
       (click)="bookmarkEvent(evenDetails.EventId)" class="btn btn-warning 
       font-weight-light ">
       {{item.bookmarked? 'Already Bookmarked' : 'Bookmark'}} 
       <i class="fa fa-bookmark" aria-hidden="true"></i>
     </button>       
</div>
</div>

--- Data to SHOW ---------------
<ng-template #dataAfterValue>
<div>
   <button type="button"   (click)="AttendEvent(evenDetails.EventId)" 
      class="btn btn-primary font-weight-light ">
      Register
      <i class="fa fa-check" aria-hidden="true"></i>
   </button>
   <button type="button"   (click)="shareEvent()" class="btn btn-info font-
      weight-light ">
      Share
      <i class="fa fa-share-alt" aria-hidden="true"></i>
   </button>
   <button type="button"   (click)="bookmarkEvent(evenDetails.EventId)" 
       class="btn btn-warning font-weight-light ">
       Bookmark 
       <i class="fa fa-bookmark" aria-hidden="true"></i>
   </button>
</div>
</ng-template>

Hareesh · Accepted Answer · 2018-01-20 08:26:12Z

2

Try this

<ng-container *ngIf="Eventdata|async; let EventItems; else dataAfterValue">
    <div *ngFor="let item of EventItems">
       {{item | json}}
    </div>
</ng-container>
<ng-template #dataAfterValue>No results...</ng-template>

#dataAfterValue will show when Eventdata return null

answered Jan 20, 2018 at 8:26

Hareesh

6,9005 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aravind · Accepted Answer · 2018-01-19 21:58:50Z

0

This can be achieved using ngIf-else in Angular as below,

<ng-template #dataAfterValue>
    <!-- Content to be showed if there is data -->
    <!-----------your actual code ---------->
</ng-template>

<div *ngIf="Eventdata === undefined;else dataAfterValue;">
    <!-- Content to be showed if there is no data -->
    <!-----------your commented code ---------->
</div>

answered Jan 19, 2018 at 21:58

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

2 Comments

Fernando Nicolalde Over a year ago

I just tried the code suggested an always returns false.

Aravind Over a year ago

can you add the declaration statement of Eventdata property

Collectives™ on Stack Overflow

how to display data in template when using Observable array in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related