📄 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

📄 View PDF in Angular

#angular #pdf #DomSanitizer

How to use?
Put the following code in HTML:

<embed [src]="sanitizedUrl | safeResourceUrl | async" class="pdf-content"/>

✅ Article Link: https://itnext.io/you-dont-need-external-packages-to-view-pdf-in-angular-e47779f86595

📄 Debounce decorator in Angular

#angular #decorator #debounce

⚠️ Third-Party Lib

Usage example:

@Component({...})
export class ExampleComponent {

    @Debounce(1000)
    execute(arg: unknown) {
      [ ... ]
    }

}

✅ Article Link: https://blog.bitsrc.io/3-ways-to-debounce-http-requests-in-angular-c407eb165ada