How to get a next() of elements clicked in type script?

Issue

I am creating a Sidebar with menu and submenu. I am toggling the menu with Jquery in my angular application

 $(document).ready(function(){
    $('.sub-btn').click(function(){
      $(this).next('.sub-menu').slideToggle();
    });
  });

Now i wanted to convert this to typescript, so when i put this in my .ts file it gives error at $(this)

 $('.sub-btn').click(function(){
   $(this).next('.sub-menu').slideToggle(); //Errors
  });

Html code

<div class="side-bar">
  <div class="menu">
    <div class="item"><a href="#"><i class="fa-solid fa-person-chalkboard"></i>Employees</a></div>
    <div class="item">
      <a class="sub-btn"><i class="fa-solid fa-graduation-cap"></i>Students <i class="fas fa-angle-right dropdown"></i></a>
      <div class="sub-menu">
        <a href="#" class="sub-item">Sub item 1</a>
        <a href="#" class="sub-item">Sub item 2</a>
        <a href="#" class="sub-item">Sub item 3</a>
      </div>
    </div>

    <div class="item"><a href="#"><i class="fas fa-desktop"></i>Hello</a></div>
    <div class="item"><a href="#"><i class="fas fa-desktop"></i>Hello</a></div>
    <div class="item">
      <a class="sub-btn"><i class="fa-regular fa-file-lines"></i>Reports <i class="fas fa-angle-right dropdown"></i></a>
      <div class="sub-menu">
        <a href="#" class="sub-item">Sub item 1</a>
        <a href="#" class="sub-item">Sub item 2</a>
        <a href="#" class="sub-item">Sub item 3</a>
      </div>
    </div>
    <div class="item"><a href="#"><i class="fa-solid fa-file-arrow-up"></i>Import</a></div>
  </div>

</div>

Can some one help me to resolve this.. Is this the best practice to use jQuery inside angular?

Solution

As other commenters already mentioned: Never use jquery in an angular project. You don't need it in angular anyway. Instead, learn how to use angular properly first. Maybe go through a tutorial.

If you already use @angular/material package, then you don't need bootstrap. If you want to use bootstrap, get rid of angular material. Choose a side, but don't use both. Angular Material can do anything that bootstrap can (and more), as far as I remember. But I usually write my own css (or mostly scss) code, because those css libs are too bloated for my taste.

But if you want to use bootstrap, please install the angular version with ng add @ng-bootstrap/ng-bootstrap.

And when I already mention css: Pls don't use vanilla .css in angular, but .scss (css preprocessor). Thank me later.

Another important library that angular shippes with that you should definitely get comfortable with: rxjs. Mostly needed for more complex applications.

Answered By - Balduraan