Learn how to use the popular lazysizes JavaScript library to lazy load images to improve a page's Time to Interactive (TTI) and First Contentful Paint (FCP). The library is written in vanilla JS, but we can leverage the power of an Angular directive to wrap up the logic for efficiently unveiling lazy loaded images without page jank.

Using the RxJs operators to debounce a form input with reactive forms in Angular is possible by subscribing to the valueChanges() Observable. But, what about template-driven forms? This is not a built-in feature of Angular's template-driven forms API.

I created a directive to debounce the NgModel form control valueChanges Observable that makes it easy to implement this functionality.

While Angular version 11 does not officially support Webpack 5, we can opt-in using either yarn's selective dependency resolutions feature, or by installing the npm-force-resolutions package.

Go ahead and jump the line, and start using webpack 5 in Angular version 11!