How to keep the parent list item open when we click on submenu list item using Angular and jQuery?

Question

I need to show the menus with submenus dynamically. What I did is, I have loaded the menus list from json and displaying that menus using ngFor in angular. Like below

<ul>
        <li *ngFor="let item of allToolsMenus; let i = index;" class="has-dropdown" id="clickedMenu{{i}}" (click)="expandNewMenu(i)">
          <a [routerLink]="['/app/' + item.category.split(' ').join('').replace('-','')]">

            {{item.category}}


          </a>
          <span class="arrow"></span>
          <ul class="dropdown-list">
            <li class="custommy" *ngFor="let subitem of item.submenus; let j = index;" id="clickedSubMenu{{i}}"><a [routerLink]="['/app/' + subitem.menu.split(' ').join('').replace('-','')]" (click)="pinnCheckClick(balass, P1_C1)">{{subitem.menu}}</a></li>

          </ul>
        </li>
      </ul>

What I need is, If I click on that expandNewMenu(), I need to show that submenu ul (dropdown-list). and if I click again, it should hide. my code is working correctly for this scenario.

expandNewMenu(item) {
$("#clickedMenu" + item).toggleClass("active-link my");
$("#clickedSubMenu" + item).click(function () {
  $(this).parent().addClass('active-link my');
});

}

but When I click on the submenu, that parent menu's (active-link my) class is removed. It should show the clicked submenu with (active) class and parent (active-link my) class. I don't know to do this.