Я новичок в angular и пытаюсь преобразовать веб-сайт (тему администратора) в angular, используя Jquery и metismenu (я понимаю, что многие люди не хотят использовать Jquery, но, поскольку я пытаюсь перенести сайт, я не буду sh изменять многие вещи) Сценарий: на веб-сайте при открытии через небольшое устройство страница выглядит следующим образом: 
шаги : 1. пользователь нажимает на иконку fa-bars 2. появляется вертикальное меню, и когда пользователь нажимает на любую из икон меню, 3. ссылки появляются справа
Задача состоит в том, чтобы получить такое же поведение при использовании Angular 8. На этом этапе мой компонент заголовка. html (тот, который получает работу fa-bar, читает)
<div class="row border-bottom">
<nav class="navbar navbar-static-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa
fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">XXXX</span>
</li>
<li>
<a (click)="removeValue()">
<i class="fa fa-sign-out"></i> Log out
</a>
</li>
</ul>
</nav>
</div>
, и мой заголовок component.ts читает:
toggleNavigation(): void {
jQuery("body").toggleClass("mini-navbar");
smoothlyMenu();
}
Мое меню боковой панели гласит:
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element" dropdown>
<div class="circle">
<span class="initials" id="myFunction(twoinitials)">
{{currentUser.firstnameletter}}{{currentUser.lastnameletter}}</span>
</div>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span style="width: 100%;text-align: center" class="block m-t-xs font-bold">
{{currentUser.firstname}} {{currentUser.lastname}}</span>
<span style="width: 100%;text-align: center" class="block m-t-xs font-bold">
{{currentUser.role_id}}</span>
</a>
</div>
<div class="logo-element">
</div>
</li>
<li>
<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label" >Accounts</span> <span
class="fa arrow"></span></a>
**<ul class="nav nav-second-level collapse">
<li><a routerLink="/paymentreq/newrequest" routerLinkActive="active- link"
[routerLinkActiveOptions]="{exact:true}" *ngIf="show_paymentrequest">Payment
Request</a></li>
<li><a routerLink="/paymentreq/payment-approval"
routerLinkActive="active-link" [routerLinkActiveOptions]="
{exact:true}" *ngIf="show_paymentapproval">Payment Approval</a> </li>
<li><a routerLink="/paymentreq/payment-pay" routerLinkActive="active-
link" [routerLinkActiveOptions]="{exact:true}"
*ngIf="show_paymentpay">Process Payment </a></li>
<li><a routerLink="/paymentreq/payment-reports" routerLinkActive="active-
link" [routerLinkActiveOptions]="{exact:true}"
*ngIf="show_paymentreport">Payment Reports</a></li>
</ul>**
</li>
.......................
Мой боковой компонент ts гласит:
jQuery('#side-menu').metisMenu();
if (jQuery("body").hasClass('fixed-sidebar')) {
jQuery('.sidebar-collapse').slimscroll({
height: '100%'
})
}
}
Теперь, с этой настройкой все "работает" нормально на обычном экране ( меню нормальное в сторону, кнопка fa-bars есть, и я могу Теперь ссылки и c) НО, когда я go перехожу в мобильный режим, кнопка fa-bars работает и появляется тонкая прокрутка, ОДНАКО, ссылки второго уровня НЕ появляются, даже если я вижу, что что-то происходит ( активна зеленая полоса слева) после нажатия любой из кнопок меню. Я занимался этим в течение дня или около того и читаю тонны и пробую тонны различных установок, но безрезультатно. Если добрая душа может помочь мне или указать мне правильное направление, я буду очень признателен.