A guide on triggering a function in Angular 6 when scrolling up or down

Is there a way to trigger a function when a user scrolls up or down in an Angular 6 project?

I want to implement a feature similar to fullpage.js in my Angular 6 application. I initially attempted to achieve this using Angular animations, but without success. Now, I am utilizing ngx-scroll-to for scrolling to the current slide. Assume that I already know how to write functions like scroll_to_bottom_slide() and scroll_to_top_slide(). However, I am unsure about implementing the necessary events.

For example:

scrollDown(){
    scroll_to_bottom_slide();
}
scrollUp(){
    scroll_to_top_slide();
}

Answer №1

To implement the window scroll event in Angular 2, make sure to utilize the @HostListener decorator.
source:

Answer №2

Implementing a listener for window events...

window.addEventListener('scroll', ...function goes here...);

One option is to establish a Dependency Injection (DI) for the window object, similar to this example:

Angular2 - How to inject window into an angular2 service

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

Tips for using the $each() function within a jquery append to retrieve object-based conditions for parameters

I encountered an issue while trying to include a condition in my endpoint, and I have recently started using jQuery for this purpose. Here is the code snippet from my Laravel view: <tbody id="tbody"> @foreach ($modul as $m) <tr> ...

ReactJS and JavaScript offer a convenient solution for extracting the most recent date from an array of date fields during the selection process

I have a table in ReactJS that displays an array of items. Each item has the following fields: id, requested_date, and location Additionally, there is another field called "date" which is located outside of the array. This "date" should always display th ...

After reaching a total of 20 entries, req.body will automatically convert the array into an

I have the ability to dynamically add properties to my form: <form action=""> <div class="property"> <label>Name : <input type="text" name="properties[1][name]"></label> <label>Order : <input type="text" na ...

Issue with <BrowserRouter>: TS2769: No suitable overload for this call available

I encountered this error and have been unable to find a solution online. As a beginner in typescript, I am struggling to resolve it. The project was originally in JavaScript and is now being migrated to TypeScript using ts-migrate. I am currently fixing er ...

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

elimination of nonexistent object

How can I prevent releasing data if two attributes are empty? const fork = [ { from: 'client', msg: null, for: null }, { from: 'client', msg: '2222222222222', for: null }, { from: 'server', msg: 'wqqqqqqqq ...

What could be causing my list of files to not properly append to FormData?

I have been working on this issue for the past three days. Despite trying various solutions from different sources, including seeking help from other websites, I am still unable to resolve it. My current challenge involves sending a post request with a Fo ...

My app's custom barrel configurations don't appear to be functioning properly in Angular 2's system-config.ts

My system-config.ts file is as follows: 'use strict'; // SystemJS configuration file, for more information visit: // https://github.com/systemjs/systemjs // https://github.com/systemjs/systemjs/blob/master/docs/config-api.md /***************** ...

Conditioning types for uninitialized objects

Is there a way to create a conditional type that can determine if an object is empty? For instance: function test<T>(a: T): T extends {} ? string : never { return null } let o1: {} let o2: { fox? } let o3: { fox } test(o1) ...

Is there a way to simultaneously filter by two attributes using mat-select-filter in Angular?

I have integrated the mat-select-filter library in my Angular project, but I am facing an issue with the displayMember filter. Currently, it only filters by code, but I would like it to also filter by name simultaneously. Is there a way to achieve this u ...

Determine if a mobile application has been installed using Vue.js

I am currently developing a web application and have implemented a check to determine whether the user is accessing it from a mobile device or laptop. Let's consider the link as: my-site.com In addition to the web version, my site also offers a mobi ...

Using JavaScript, reload the page once the data has been retrieved from an Excel spreadsheet

I'm facing an issue with my JavaScript code. Here's what I have: a = Excel.Workbooks.open("C:/work/ind12.xls").ActiveSheet.Cells.find("value"); if(a == null) document.getElementById('dateV ...

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

My goal is to set up an automatic email sending system that, upon receiving details like name and email, will send a confirmation email to the provided email address with the message "subscribed." I've been working on this task for about 7 hours strai ...

Having trouble setting up a successful connection with Socket.io client?

I'm struggling to integrate websockets into my website. Every attempt I make in the client results in errors. This is how I have Apache configured: <VirtualHost *:80> ServerName xxxxx.com DocumentRoot /var/www/html/RoW ErrorLog /var/www/html/Ro ...

sending a transformed javascript array from php to a javascript function

I'm looking for a way to pass a JavaScript array (that has been converted from PHP to JS) from PHP code to a JavaScript function. <?php // Convert PHP array to JavaScript array $php_array = array('he','hi','hello'); ...

Exploring Angular 6 CLI Workspaces: A Guide to Creating Libraries for Exporting Services

Introduction: In Angular CLI 6, a significant feature called workspaces was introduced. A workspace has the ability to house multiple projects within it. All configurations for the workspace and its projects are stored in an 'angular.json' fi ...

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

The code snippet below seems to be causing some trouble. It's supposed to filter HTML content that includes a div with the class "filtered_entries_box", but it's not working as expected. $.ajax({ "url" : "start.php", "type" : "POST", ...

Analyzing the 'inactive' attribute of mat-checkbox

I am facing difficulty in changing the disabled property of mat-checkbox - https://material.angular.io/components/checkbox/api <mat-checkbox (change)="itemChanged()" [(ngModel)]="item.selected" [disableAfterClick]=" ...

Creating a Basic jQuery AJAX call

I've been struggling to make a simple jQuery AJAX script work, but unfortunately, I haven't had any success so far. Below is the code I've written in jQuery: $(document).ready(function(){ $('#doAjax').click(function(){ alert ...

How to dynamically populate a select option with data from a database in CodeIgniter 3 and automatically display the result in a text

How can I fetch select options from a database in CodeIgniter 3 and display the result in a text field and span area? Currently, I am only able to display data from the row_name when an option is selected. Here is my current implementation: <?php $query ...