The Ultimate Guide to Infinite Scrolling in Angular 11

The Ultimate Guide to Infinite Scrolling in Angular 11

Powered by Open Brewery DB, NGX-Infinite-Scroll, and Angular Material

Powered by Open Brewery DB, NGX-Infinite-Scroll, and Angular Material

Image for post

Photo by  Kate Torline on  Unsplash

Ethical Disclaimer

Infinite scrolling can be highly addictive.

I recommend the article “ Why the infinite scroll is so addictive” by 

Grant Collins

. It thoroughly delves into the psychological factors that entice users never to stop scrolling.I also strongly recommend “ The Social Dilemma” on Netflix. This documentary investigates the intensely adverse human impact of social media, which is more times than not accompanied with infinite scrolling. Don’t get me started on how many hours I have wasted scrolling down Instagram.

With that being said, infinite scrolling is undeniably a highly effective way to present a boundless list of data to your users.

Without further ado, let’s jump right in.

Setting Up With Angular Material

This command will create our Angular application.

ng new infinite-scroll --routing=false --style=scss --skip-tests

Now we add  Angular Material to our application.

ng add @angular/material

angular javascript programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Updating From Angular 10 to Angular 11

Updating from Angular 10 to Angular 11. In 2020, Angular received three stable update (Version 9, 10, and 11,) each introducing a few significant changes. We’ll focus on the last two, Angular 10 and Angular 11, the rule is currently facing issues, especially for packages like update @angular/core.

How to Use JavaScript Libraries in Angular Project

In this tutorial, you'll learn how to use JavaScript libraries in Angular project. Using a JavaScript library inside an Angular project is not as straightforward as using it in Angular JS or a plain JavaScript project.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.