раскрывающийся список не работает в компоненте приложения Angular, но работает в индексе

Question

Здравствуйте, выпадающий список прослушивается, когда я перемещаю его в компонент приложения, но он работает, когда записывается в индекс.Я немного новичок в Angular, поэтому надеюсь, что вы мне поможете.

снимок экрана:

код:

<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">

    <div class="slimscroll-menu" id="remove-scroll">

        <!-- User box -->
        <div class="user-box">
            <div class="user-img">
                <img src="../assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
            </div>
            <h5><a href="#">Bobo</a> </h5>
            <p class="text-muted">Super Admin</p>
        </div>

        <!--- Sidemenu -->
        <div id="sidebar-menu">

            <ul class="metismenu" id="side-menu">

                <!--<li class="menu-title">Navigation</li>-->

                <li>
                    <a href="index.html">
                        <i class="fi-air-play"></i><span class="badge badge-danger badge-pill float-right">7</span> <span> Dashboard </span>
                    </a>
                </li>

                <li>
                    <a href="javascript: void(0);"><i class="fi-layers"></i> <span> Gestion Des Utilisateurs </span> <span class="menu-arrow"></span></a>
                    <ul class="nav-second-level" aria-expanded="false">
                        <li><a href="ajoutprof.html">Ajout d'un Enseignant</a></li>
                        <li><a href="LesProfs.html">Liste des Enseignants</a></li>

                    </ul>
                </li>

            </ul>
        </div>
        <!-- Sidebar -->

        <div class="clearfix"></div>

    </div>
    <!-- Sidebar -left -->

</div>
<!-- Left Sidebar End -->