Unable to track scrolling behavior on Internet Explorer 11

I am facing an issue with my code snippet:

this.currentScrollYSub = Observable.fromEvent(window, 'scroll')
    .throttleTime(5)
    .subscribe(e => {
    this.scrollY = window.scrollY;
    console.log(window.scrollY); // Result: undefined
    });

Although it works perfectly fine on Chrome, I have observed that it does not function properly on Internet Explorer 10 and Internet Explorer 11.

Any suggestions on how I can get this to work on Internet Explorer 11?

EDIT

I even attempted the following approach:

@HostListener('window:scroll', ['$event'])
track(event) {
    console.debug("Scroll Event ", document.body.scrollTop); // Result: "Scroll Event 0"
}

@HostListener('window:scroll', ['$event'])
track(event) {
    console.debug("Scroll Event ", this.scrollY);// Result: "Scroll Event undefined"
}

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

issue with mat-select in a dialog not functionering correctly

In my current project, I am working on implementing a feature that requires the user to select an option from a drop-down menu and confirm their choice by clicking an "OK" button. To achieve this functionality, I am utilizing Angular Material. However, I h ...

Issue with Navigating Angular Buttons

In my Angular application, I have a mat-card component containing a list of buttons. Below is the code snippet: <mat-card class="side-card"> <mat-card-title>Images</mat-card-title> <mat-card-subtitle>Choose to star ...

A guide on transferring data between two arrays of objects using TypeScript

I am working on implementing a get request within a component that retrieves a response: getPaymentIntents(): Observable<Payment>{ const url: string = 'https://store.com//payments'; return this.http.get<Payment>(url); } ...

Exploring the URL in Angular 6 with ActivatedRoute

In MyComponent, the router loads different components based on the route. I am trying to retrieve the full current route in the header component using ActivatedRoute.url. However, it only displays {path: "d"} instead of the complete path or just the last p ...

Observing the route parameters in an Observable stops once a 404 error is triggered from another Observable within a switchMap

In my current scenario, I am monitoring the parameters of the active route in order to update the content being displayed. Within my component's ngOnInit() function, I have implemented the following logic: this.activeRoute.paramMap .pipe( ...

Encountering errors with dependency injection in Angular 2 constructors

Recently delving into Angular2, I diligently studied all the tutorials on the official website and eagerly started working on my project. However, I hit a roadblock almost immediately. Here are the snippets of code: app.ts: import { Component } ...

How Angular Router deals with "/" in a route parameter

I've been working on an Angular project with routing, focusing on a route structure like the one below. { path : 'preview/:Id', loadChildren : () => import('./path/preview/preview.module').then( m => m.Preview ...

Exploring Angular 4's capability: Incorporating data from Http Post Response into a .js file or highchart

I'm a beginner with Angular 4. I'm trying to create a dashboard that pulls data from an Http Post Response and I want to use this data to create a Chart (Highchart). I have successfully received the response in the console.log and formatted it i ...

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

Leverage the power of Angular's library dependency injection with the @inject

I am currently working on a project that involves a library. Within one of the classes in this library, I am attempting to provide a service using @optional, @host, and @inject decorators with an injection token. In the parent component, I have the optio ...

Webpack 5 is failing to bundle re-exports correctly

Whilst bundling my web application, I've come across an issue with re-exports of certain modules not behaving as expected. Despite trying various optimization settings, I have been unsuccessful in resolving this issue. Setup Here's the setup tha ...

An issue has occurred due to an illegal state while attempting to utilize two modules within a single

When a user logs into my system, they are redirected to the profile page /profile/profile.component.ts after entering correct login credentials. Now, I want to implement an additional module for protected pages/components like the profile page and redirect ...

The issue with functions not executing when triggered by HammerJS

In my application, there is a component that displays information for different days as they are cycled through using the functions dayUp() and dayDown(). Here is an example of how these functions are structured: dayUp() { if (this.dayCount == 7) { ...

Using TypeScript to Populate a Map with Predicates and Strings from a Map of String to String and String to Predicate

My data structure includes a Map that maps one string to another string: const strToStr = new Map<string, string>([ ['foo', 'foo'], ['bar', 'qux'], ]); I also have a different Map where each key is a s ...

Tips for extracting specific JSON response data from an array in TypeScript

I have an array named ReservationResponse, which represents a successful response retrieved from an API call. The code snippet below demonstrates how it is fetched: const ReservationResponse = await this.service.getReservation(this.username.value); The st ...

Directive for multi-field validation in Angular 4 Template-Forms with ngModelGroup

Can someone assist me in validating the match between a user's new password and confirm password using an Angular Directive? Despite correctly identifying a mis-match, the error message is not displayed: Template Form <form> <md-input- ...

What is the simplest method to customize or enhance Angular 5 directives with Angular-material?

In my Angular5 application, I am utilizing the angular-material library in some areas. However, I prefer to maintain a level of agnosticism in my markup when it comes to external libraries. Despite this, I attempted the following approach: import { Direc ...

Incorporate chat functionality into Angular using an embedded script

Recently, I encountered an issue with inserting an online chat using a Javascript script into my website. My initial plan was to add it directly to my app.component.html, but unfortunately, it didn't display as expected. I'm now exploring option ...

Tips for showcasing array values on an HTML webpage

Having trouble displaying the "latitude" and "longitude" in html. I attempted to use a forEach loop, but it was not successful https://i.sstatic.net/FnLMP.png this.otherService.getList().subscribe( (response: any) => { this.atm = response; H ...

`Navigating seamlessly across multiple Angular applications`

Contemplating the use of Angular in a corporate setting, I am thinking ahead to having multiple applications. Does Angular support the use of multiple applications and sharing components? For instance, can I share a Navigation component? Update (2/1/19): ...