JavaScript code is not working in angular .ts file

Question

**this is my HTML Code **

<section class="funfactSection">
    <div class="container">
        <div class="row">
            <div class="col text-left pt-5 pdl115 pdb38">
                <div class="row mrm110px">
                    <div class="col-xl-6 col-md-6 col-lg-6">
                        <div class="icon_box_02">
                            <i class="fal fa-users"></i>
                            <h3><span><span data-counter="140" class="timer">140</span>M+</span> Happy Users</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or
                                incididunt.
                            </p>
                        </div>
                        <div class="icon_box_02">
                            <i class="fal fa-coffee"></i>
                            <h3><span><span data-counter="300" class="timer">300</span>M+</span> Cup Coffee</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or
                                incididunt.
                            </p>
                        </div>
                    </div>

                    <div class="col-xl-6 col-md-6 col-lg-6">
                        <div class="icon_box_02 ">
                            <i class="fal fa-hamburger"></i>
                            <h3><span><span data-counter="200" class="timer">200</span>M+</span> Project Done</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or
                                incididunt.
                            </p>
                        </div>
                        <div class="icon_box_02">
                            <i class="fal fa-code"></i>
                            <h3><span><span data-counter="500" class="timer">500</span>M+</span> Line Code</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or
                                incididunt.
                            </p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>

this is my angular component typescript file

import { Component, OnInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-home-fact',
  templateUrl: './home-fact.component.html',
  styleUrls: ['./home-fact.component.css']
})
export class HomeFactComponent implements OnInit {

  ngOnInit(): void {
    let skl: boolean = true;
    $('.timer').appear();
    $('.timer').on('appear', () => {
      if (skl) {
        $('.timer').each(() => {
          var $this = $(this);
          $({ Counter: 0 }).animate({ Counter: $this.attr('data-counter') }, {
            duration: 3000,
            easing: 'swing',
            step: function () {
              var num = Math.ceil(this.Counter).toString();
              $this.html(num);
            }
          });
        });
        skl = false;
      }
    });
  }

}

**My Problem: ** First time is work fine when document/angular project is loaded but whenever i navigate to another component and come back from another component to it then it's not working. in this we used two library npm i [email protected] and npm i jquery.appear Please help

i want that it's work fine whenever i came back from another component to it;