CODEWITHSUNDEEP
javascriptangulartypescriptfirebaseobservable
Fernando Nicolalde
Fernando Nicolalde

Reputation: 197

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

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>

Upvotes: 0

Views: 444

Answers (2)

Hareesh
Hareesh

Reputation: 6900

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

Upvotes: 2

Aravind
Aravind

Reputation: 41573

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>

Upvotes: 0

Related Questions