📄 animationFrameScheduler example

#angular #rxjs #animationFrameScheduler

animationFrameScheduler is tailored for tasks that require synchronization with the browser's animation frame. It schedules tasks to be executed just before the next animation frame, ensuring smooth animations and minimizing unnecessary computations. For instance, we can utilize the animationFrameScheduler to update the UI based on animation frames, creating a visually pleasing and responsive user interface.

The scrollPosition$ observable captures the scroll position of the window on each scroll event. The animationFrameScheduler is used to ensure that the scroll position updates and smooth scrolling effect occur right before each animation frame, providing a visually smooth scrolling experience. When the user clicks the "scroll to top" button, the scrollPosition$ observable is subscribed to, and the window is scrolled smoothly towards the top in increments of 10 pixels until the scroll position reaches 0.

✅ Article Link: https://priyank-bhardwaj.medium.com/reactive-ninja-harnessing-rxjs-for-angular-mastery-part-2-7091aac29d60

📄 Custom Operators in RxJS

#angular #rxjs

✅ Article Link: https://medium.com/@navneetsingh_95791/custom-operators-in-rxjs-for-angular-applications-building-and-utilizing-your-own-operators-b5c281f979a1

📄 Custom RxJS operators 1/7: "Сache operator"

#angular #rxjs #cache

Often an RxJS stream represents an http request — a stream that emits a single value and completes. Performance-wise, it is a good practice to cache a response from a server for a certain amount of time. The built-in share operator can be configured to provide a caching mechanism with a Time To Live (TTL) for a response.

operator

import { ... } from 'rxjs';

function cache<T>(ttl: number = Infinity): MonoTypeOperatorFunction<T> {
  return share({
    connector: () => new ReplaySubject(1),
    resetOnComplete: () => timer(ttl),
  });
}

📄 Custom RxJS operators 2/7: "filterNil operator"

#angular #rxjs #filterNil

It is quite common to filter out null and undefined values from the resulting stream. Obviously, the built-in filter operator is the right tool to do the job, however in order to ensure proper type narrowing, the predicate function has to be a user-defined type guard. Therefore, it makes sense to encapsulate it into a custom RxJS operator.

operator

import { filter, OperatorFunction } from 'rxjs';

function filterNil<T>(): OperatorFunction<T, NonNullable<T>> {
  return filter((v): v is NonNullable<T> => v != undefined);
}

📄 Custom RxJS operators 3/7: "firstMatching operator"

#angular #rxjs #firstMatching

For most use cases, the task can be accomplished at least in two ways. However, there is a subtle difference when the source stream completes without having emitted a value that meets requirements. The detailed explanation can be found in one of my RxJS hints. The operator in question allows to choose a given strategy to handle such scenario based on the required argument.

operator

import { of, MonoTypeOperatorFunction, pipe, first, filter, take } from 'rxjs';

function firstMatching<T>(
  predicateFn: (v: T) => boolean,
  required: boolean = false
): MonoTypeOperatorFunction<T> {
  return required ? first(predicateFn) : pipe(filter(predicateFn), take(1));
}