I'm trying to migrate my bootstrap html template to angular. I tried manage to bring out the design part, but submenus are not working when I clicked the main menu.
My codings in index.html :
<html
lang="en"
class="light-style layout-navbar-fixed layout-menu-fixed layout-menu-collapsed"
dir="ltr"
data-theme="theme-default"
data-assets-path="/assets/"
data-template="vertical-menu-template"
>
<head>
<meta charset="utf-8">
<title>Templates</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>-->
<script src="/assets/vendor/js/helpers.js"></script>
<!--<script src="/assets/vendor/js/template-customizer.js"></script>-->
<script src="/assets/js/config.js"></script>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
<script src="/assets/vendor/libs/jquery/jquery.js"></script>
<script src="/assets/vendor/libs/popper/popper.js"></script>
<script src="/assets/vendor/js/bootstrap.js"></script>
<script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/assets/vendor/libs/hammer/hammer.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<!--<script src="/assets/vendor/libs/tagify/tagify.js"></script>-->
<script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
<script src="/assets/vendor/js/menu.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
<script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
and my coding part in header component files is below. In this file only I'm calling the menus part. Menus are showing fine...but its relevant submenus are not showing.
<ul class="menu-inner py-1">
<!-- Dashboard -->
<li class="menu-item">
<a href="#" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i>
<div data-i18n="Course Master">Course</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="manage-course.html" class="menu-link">
<div data-i18n="Manage Course">Manage Course</div>
</a>
</li>
<li class="menu-item">
<a href="approve-course-master-list.html" class="menu-link">
<div data-i18n="Approve Course">Approve Course</div>
</a>
</li>
</ul>
</li>
</ul>