Issue in Angular 6: TS2339 error - The property 'scrollUp' is not found on type 'JQueryStatic'

I have incorporated jQuery into my Angular 6 project using the following steps:

npm install jquery
npm install --save @types/jquery

In addition, I have included jQuery in my angular.json file like this:

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/js/plugins.js"

The plugins.js file contains custom jQuery functions. However, when attempting to use one of these functions in my header.component.ts file, I encountered the following error:

ERROR in src/app/includes/header/header.component.ts(31,9): error TS2339: Property 'scrollUp' does not exist on type 'JQueryStatic'.

My header.component.ts file is structured as follows:

import * as $ from "jquery";

declare const meanmenu: any;
declare const scrollUp: any;

ngOnInit() {
  $.scrollUp({
        scrollText: '<i class="fa fa-angle-up"></i>',
        easingType: 'linear',
        scrollSpeed: 900,
        animation: 'slide'
      });
}

Answer №1

interface jQueryStatic {
  scrollTop: any;
}

and

($ as any).scrollTop({
        scrollIcon: '<i class="fa fa-arrow-up"></i>',
        transitionType: 'easeInSine',
        scrollDuration: 800,
        animationType: 'smooth'
      });

did the trick for me ...

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

Transform JSON data into a new object

I'm currently exploring methods to manipulate my JSON data and create a separate object with the modified information. Specifically, I am working with this JSON file: My goal is to transform [dataset][data] into the following format: [Date.UTC(2013 ...

Guide on setting an array as the data for counts in charts.js

I am working with a chart.js graph and I need to assign an array to the data property. Below is my current code snippet: datasets: [ { data:[40,56,345,2354], backgroundColor: "#007BA7", hoverBackgroundColor: "#00CC99" } ] Howeve ...

The initial AJAX GET request is successful, however subsequent clicks do not trigger the call

I have been encountering an issue with my JavaScript where an Ajax call that used to work perfectly fine suddenly stopped working. I have not made any changes to the code that could cause this problem, but something is definitely going wrong. The Ajax call ...

Increase the number of buttons in Angular application

One dilemma I am facing involves a form with an "add more" button. Every time the button is clicked, a new instance of a class gets added to an array. Additionally, there is a delete row function that removes items from the array. The issue arises when usi ...

Angular: Troubleshooting - potential bug in test case with jasmine causing TypeError: Undefined property 'cmd' OrAngular: Debugging

I'm working on writing a unit test case for integrating lotame analytics. Can anyone offer some assistance on how to write a test case for this integration? I've been stuck on this for quite some time now and keep receiving TypeError: Cannot read ...

Issue with undefined arrays in the Angular merge sort visualization tool

I am currently working on developing a visualizer for sorting algorithms using Angular. However, I have encountered some difficulties while implementing merge sort. As a Java programmer, I suspect that there may be an issue with my TypeScript code and the ...

Error: It appears that the callback with the specified ID for the module <unknown> cannot be found

I decided to create a yarn package that includes common components, services, utils, and more for my project. After creating the package, I added an index.ts file in the src folder to export all components. Once the package was built and added to my projec ...

Hosting static files in .NET Core 3.1

I am encountering an issue with my app built on .Net Core 3.1 and Angular 10. Within my Startup.cs file, I have the following code snippet: app.UseStaticFiles(); app.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path. ...

Utilize a CSS style or class on a div element

Looking for a way to style alternate div elements within a parent div? Check out this example: <div id="comment"> <div id="m1">...</div> <div id="m2">...</div> </div> I tried to use some jQuery to add a CSS c ...

PHP button echo not working as expected

Utilizing jquery ajax, I am fetching data from b.php which includes a button. echo '<button id="btn" value="nice!">Click!</button>'; $.ajax({ type: "GET", url: "b.php", dataType: "html", success: function(data){ ...

The String.includes method is unable to detect substrings within a string

Below is the text that I currently have: LOG: time="2021-12-09T16:55:25+01:00" level=debug msg=" ...

Combining cells for certain entries in an Angular data table

Just starting to learn angular, and here's the scenario I'm dealing with: I have a table consisting of 10 columns. Let's say column 4 contains different status categories like children, teen, young, adult, and senior. When displaying all ...

"Import data from a text file and store it as an array of objects using Types

I need assistance with converting the information in my text file into an array of objects. Below is a snippet of the data from the text file: DOCNO NETAMOUNT IREF1 IREF2 DOCDT 001 30000 50 100 6/7/2020 2 40000 40 90 6/7/2020 Currently, t ...

How can I use a button to save all changes made in a JqGrid checkbox column simultaneously?

In my jqgrid, there is a column named 'asistencia' which displays data from a database as checkboxes. These checkboxes are pre-checked based on the property formatoptions: {disabled : false}. I would like to implement a 'save' button th ...

What could be the reason for the malfunction of AJAX in my PHP application?

I am working on a PHP application that involves using AJAX. I am facing some difficulties with the code in the View page where I am trying to access the controller URL but not getting the expected output after using the echo statement. Can anyone please as ...

javascript increment variable malfunctioning

Below is the script I am working with: $(function() { var fileCount = {{$image_counter}}; $('#remove-file').click(function() { fileCount--; }); if (fileCount >= '5'){ $("#d ...

Issue with background image resizing when touched on mobile Chrome due to background-size property set to cover

My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chro ...

Running RXJS Functions in a Sequence Maintained by an Array

I am trying to run a series of functions in sequence by storing them in an array (specifically for an Angular APP_INITIALIZER function). Here is the array in question: const obsArray = [ myService1.init(), myService2.init(), ... myServiceN ...

Tips for maintaining a user's logged-in status when the "remember me" option is selected

I need to implement a feature that keeps a user logged in even if they refresh or close the browser. This is the code I have written: index.php <?php include_once('elogFiles/view/myIncludes.php'); ?> <div class="container" ...

Is there a different way to access the prohibited secure route?

I am interested in finding an alternative path for the router displayed below. Specifically, I am wondering if it is possible to set a different route (such as /) in case the AdalGuard restricts access to route /int or any of its sub-routes? Traditionally ...