How to use jquery .counterUp function in angular5?

Question

I want to create a counter up view for my company website, to do this i have to use jquery counterUp function.

Angular is not recognising the function even after adding script tags for it.

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

The counter should start from zero and reach a certain defined number.

Answer 1

Assuming that the element referenced by ".counter" is an Angular component you should be using ViewChild instead of jQuery.

For example if the element was of class Counter then the likely better way to achieve this affect would be.

@ViewChild(Counter)
counter: Counter;

Then in the code block it would look like this.

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

Answer 2

1./ Install jQuery

npm install jquery

2./ Open angular.json and find scripts

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

3./ go to your component and on top declare this

declare var jQuery: any;

4./ and in side ngOnInit

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