Exploring the implementation of the jquery .counterUp function within Angular 5

Question

I am working on implementing a counter up view for my company's website using the jQuery counterUp function.

Despite adding script tags for it, Angular is not recognizing the function.

if(st >= hT ){
  $('.counter').counterUp({
    delay: 10,
    time: 2000
  });

The counter needs to start from zero and reach a specific defined number.

Answer 1

Answer №1

If the ".counter" element is an Angular component, it is recommended to use ViewChild instead of jQuery.

For instance, if the element has the class Counter, a better way to achieve this effect would be:

@ViewChild(Counter)
counter: Counter;

Then, in the code block, it would appear like this:

if(scrollTop >= headerTop ){
  this.counter.counterUp({
    delay: 10,
    time: 2000
});

Answer 2

If the ".counter" element is an Angular component, it is recommended to use ViewChild instead of jQuery.

For instance, if the element has the class Counter, a better way to achieve this effect would be:

@ViewChild(Counter)
counter: Counter;

Then, in the code block, it would appear like this:

if(scrollTop >= headerTop ){
  this.counter.counterUp({
    delay: 10,
    time: 2000
});

Answer 3

1./ Start by downloading and installing jQuery using npm

npm install jquery

2./ Next, navigate to your angular.json file and locate the scripts section

  "scripts": [
  "node_modules/jquery/dist/jquery.min.js" ]

3./ In your component file, declare jQuery at the top of the file like this

declare var jQuery: any;

4./ To utilize jQuery functionalities within ngOnInit, add the following code snippet

  (function ($) {
     if(st >= hT ){
         $('.counter').counterUp({
           delay: 10,
           time: 2000
         });
  })(jQuery);

Answer 4

1./ Start by downloading and installing jQuery using npm

npm install jquery

2./ Next, navigate to your angular.json file and locate the scripts section

  "scripts": [
  "node_modules/jquery/dist/jquery.min.js" ]

3./ In your component file, declare jQuery at the top of the file like this

declare var jQuery: any;

4./ To utilize jQuery functionalities within ngOnInit, add the following code snippet

  (function ($) {
     if(st >= hT ){
         $('.counter').counterUp({
           delay: 10,
           time: 2000
         });
  })(jQuery);