custom js code not getting applied in angular responsive view

Question

I have angular project in which I have included custom js in index.html . I have following code in custom.js file for navigation menu open and close for mobile devices. active class not getting applied in mobile view. I searched but did not found reason/solution of it.

$(document).ready(function () {
    
      //  Navigation Toggle
      $("#nav-icon").click(function () {
        $(this).toggleClass("active");
        $(".close_overlay").toggleClass("active");
        $(".navigation").toggleClass("active");
      });
      $(".close_overlay").click(function () {
        $("#nav-icon").removeClass("active");
        $(".close_overlay").removeClass("active");
        $(".navigation").removeClass("active");
      });
      $("header .singleMenu").click(function () {
        $("#nav-icon").removeClass("active");
        $(".close_overlay").removeClass("active");
        $(".navigation").removeClass("active");
      });
      
    });

If above code is included in header component ts file. It works. But that's not correct way of doing this.

How can add active class in mobile view when click events as above?

please guide and help. thanks.