You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
Contents
Recent Posts
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- The Real State of JavaScript 2018
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
How to Reverse an Observable Array in Angular - AngularFire2 FirebaseListObservable
written by Jeff Delaney
It is ideal to unwrap observables in Angular inside the component HTML with the | async pipe. Sometimes you may want your list observable in reverse order, which you can achieve with a custom reverse pipe. This snippet was used to implement toast messages, showing the most recent first.
Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div *ngFor="let item of listObservable | async | reverse"> | |
| {{item?.whatever}} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Pipe, PipeTransform } from '@angular/core'; | |
| @Pipe({ | |
| name: 'reverse' | |
| }) | |
| export class ReversePipe implements PipeTransform { | |
| transform(value) { | |
| if (!value) return; | |
| return value.reverse(); | |
| } | |
| } |