Toggle and collapse not working after routing in Angular 5

I am converting an html admin template to Angular 5. All the scripts and css from the html template are placed in index.html( in Angular). The sidebar menu

<li class="nav-item">
    <a routerLink="/dashboard/about"><i class="ft-mail"></i>
      <span data-i18n="" class="menu-title">About</span>
    </a>
  </li>
  <li class="nav-item">
      <a routerLink="/dashboard/team"><i class="ft-mail"></i>
        <span data-i18n="" class="menu-title">Team</span>
      </a>
  </li>
  <li class="nav-item "><a href="#"><i class="ft-home"></i><span data-i18n="" class="menu-title">Dashboard</span></a>
    <ul class="menu-content">
      <li><a href="#" class="menu-item">eCommerce</a>
      </li>
      <li><a href="#" class="menu-item">Analytics</a>
      </li>
      <li><a href="#" class="menu-item">Fitness</a>
      </li>
    </ul>
  </li>

The collapse is not showing. And there is a responsive navigation icon in the header component. This is not toggling also.

 <li class="nav-item mobile-menu d-md-none mr-auto"><a href="#" class="nav-link nav-menu-main menu-toggle hidden-xs"><i class="ft-menu font-large-1"></i></a></li>

If I give a page refresh, then collapse is working. But if the same page shows after routing:

<a routerLink="/dashboard/team"><i class="ft-mail"></i>
    <span data-i18n="" class="menu-title">Team</span>
</a>

then it's not collapsing.

So, What's the best way of converting a html template into Angular? How to manage the scripts file that are related to jquery after routing?