CODEWITHSUNDEEP
jqueryangulartypescriptangular5
A.R.Basith
A.R.Basith

Reputation: 181

How to use jquery .counterUp function in angular5?

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.

Upvotes: 0

Views: 691

Answers (2)

winnie
winnie

Reputation: 109

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
});

Upvotes: 1

Yash Rami
Yash Rami

Reputation: 2327

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);

Upvotes: 0

Related Questions