The `ngx-infinite-scroll` feature does not function properly on mobile devices when used in conjunction with the

I'm currently working on an Angular project that utilizes the mat-sidenav layout and routing. I came across an issue when trying to display a list of elements from a database using ngx-infinite-scroll. Following the user guide for ngx-infinite-scroll, everything seemed to work fine on desktop. However, when I checked the mobile view using developer tools, I noticed that the sidenav would disappear and the infinite scroll feature wouldn't work properly. I even tested it in emulators but had no luck fixing the issue.

I've attempted to solve this problem by setting a fixed height and using [scrollWindow]="false", but unfortunately, these attempts were unsuccessful as well.

If anyone has experience with this issue or any ideas on how to resolve it, your help would be greatly appreciated!

Thank you, Kumar

angular

Answer №1

A demonstration on StackBlitz I've created an interactive example that showcases the issue you're facing: https://stackblitz.com/edit/ngx-infinite-scroll-demo. In my understanding, your challenge stems from the fact that ngx-infinite-scroll struggles with accurately detecting when the scrolling has completed due to its binding to the actual window.

If you prefer to bind the scroll event to the window, you might find it simpler to utilize a custom directive instead of continuously monitoring the inner scroll state of an element.

Alternatively, you may consider implementing an IntersectionObserver at the end of the list and associating a callback function. More details can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API.

The original response Could you please provide us with a detailed example of your setup? Additionally, specifying the version of ngx-infinite-scroll that you are utilizing would greatly assist in addressing this question more effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What significant alterations can be found in the architecture of Angular 2?

Hello, I am currently exploring Angular 2 and Stack Overflow. I am curious about the significant architectural differences between Angular 2 and its predecessor, Angular. In Angular, there were functions like $apply, $digest, $evalAsync, and others. Why we ...

angularjsangular

How to attach input to function invocation in Angular 2

Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...

javascripthtmlcssangularjsangular

Tips for identifying errors in Angular's HTTPClient.post() method when working with generics

This question has been asked numerous times on SO, but none of the responses address my issue. Therefore, I am rephrasing it. Here is a method (within a service) that performs a post request. makePostReq<T>(reqObj: {url:string, body:any, headerDa ...

angular

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2

I have a form that allows users to create Todo's. An ITodo object includes the following properties: export interface ITodo { id: number; title: string; priority: ITodoPriority; } export interface ITodoPriority { id: number; name ...

angulartypescript

Using placeholders with inputs in an Angular2 table generated by ngFor

I have an array public example = [['hallo', 'fruit', 'rose'], ['apple','book']] Currently, I am working on creating a table of inputs. The values in this table depend on the specific part that I am usin ...

javascriptangulartypescriptngfor

Guide to creating jest unit test for an observable variable exclusively utilized in a template resulting in the error "Property 'pipe' of undefined cannot be read"

Seeking help with creating unit tests for an Angular component that utilizes a constructor and observable variable in the HTML template. Below is the code snippet I am having issues with: voice-summary.component.ts export class VoiceSummaryComponent { v ...

angularunit-testingjestjs

How to Customize Bootstrap Colors Globally in Angular 4 Using Code

I am interested in developing a dynamic coloring system using Angular. I have set up a service with four predefined strings: success, info, warning, and danger, each assigned default color codes. My goal is to inject this service at the root of my applicat ...

cssangularstyling

Error-throwing constructor unit test

In my code, I have implemented a constructor that takes in a configuration object. Within this constructor, I perform validations on the object. If the validation fails, I aim to throw an error that clearly describes the issue to the user. Now, I am wonde ...

angulartypescriptunit-testingjasmine

Primeng could not locate the material theme

Within my Angular application, I have incorporated the primeng npm package using npm install. Following the instructions provided on the GetStarted page for primeng, it is mentioned that the library includes 32 free themes. However, upon exploring the node ...

angularmaterial-designprimeng

Guide to adding a custom font to your Angular 5 project

I am looking to integrate a new font into my Angular 5 project. So far, I have attempted: 1) Moving the file to assets/fonts/ 2) Including it in the styles section of .angular-cli.json However, it seems that the file is not a regular .css file; it is a ...

angularfonts

Combining two observable entities

Utilizing Angular 4 and rxjs, the objective is to fetch data from two distinct servers in JSON format, merge this data, and exhibit it in a list by associating the list with an observable array. **Word Search Component TypeScript File:** @Component( ...

javascriptangularrxjsobservable

The implementation of async await within a switch case statement is failing to function properly

Is it possible to wait for the resolution of a promise within a switch case statement by using the keyword await? I am facing an issue with my Angular component where the following code is causing crashes in my application. switch (this.status) { ...

javascriptangular

Angular Pipe -- Implicit type 'any' error occurs when trying to index type 'string' with an expression

Encountering an error while constructing the time ago pipe: Obtaining an implicit 'any' type due to inability to index type with a 'string' expression if (value) { const seconds = Math.floor( (+new Date() - +new Date(Numb ...

angulartypescript

Looking for an Angular Material component that displays a list of attributes?

I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...

cssangularangular-materialmaterial-designkey-value

Tips for adding items to a Form Array in Angular

I am working on a project with dynamic checkboxes that retrieve data from an API. Below is the HTML file: <form [formGroup]="form" (ngSubmit)="submit()"> <label formArrayName="summons" *ngFor="let order of form.controls.summons.controls; let i ...

angulartypescriptrxjsangular-reactive-forms

Experimenting with the routerLink directive in Angular 2

Currently, I am in the process of testing routing functionality. As part of this, I have moved my navbar to a separate component called MdNavbar, which primarily consists of HTML and CSS. The RouteConfig is located in another component where MdNavbar is in ...

htmltypescriptangularangular2-routingangular2-testing

The property '.....' is missing an initializer and has not been explicitly assigned in the constructor

I want to address an issue with a similar question title that was asked 5 years ago on Stack Overflow. The problem is related to declaring a variable as an array of a specific object type in an Angular component using TypeScript 4.9. Even though I tried t ...

angulartypescript

Incorrect Node.js version identified

I have been facing a challenge trying to integrate my projects developed with Spring and Angular using Maven. The issue arises with the Node.js version: [ERROR] Node.js version v8.11.3 detected. [ERROR] The Angular CLI requires a minimum Node.js version of ...

javanode.jsangularspringubuntu

The Angular Material Stepper seems to have a glitch where calling the next() function does not work until I manually click

Currently, I am in the process of developing an Electron app using Angular 7 and Angular Material. Within my application, I have implemented a Stepper component where the second step involves making a call to the Electron main process to prompt the user t ...

angularangular-material

Discover the steps to activate and utilize mat-error without the need for form control manipulation

Have you encountered an issue with using ngModel and mat-error without a form? Is there a workaround that allows the use of mat-error with ngModel? #code <mat-form-field appearance="fill" class="w-48per"> <mat-label>Fi ...

angulartypescript