I am trying to integrate a Html admin theme into new angular project. The pages are loading fine, but the toggle & click actions are not working after integrating into Angular.
I am trying to integrate a Html admin theme into new angular project. The pages are loading fine, but the toggle & click actions are not working after integrating into Angular. Below is my code.
My app.component.html
<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>
Header.component.html
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-cyan">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- #Float icon -->
<ul id="f-menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main g-bg-cyan">
<i class="mfb-component__main-icon--resting zmdi zmdi-plus"></i>
<i class="mfb-component__main-icon--active zmdi zmdi-close"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="doctor-schedule.html" data-mfb-label="Doctor Schedule" class="mfb-component__button--child bg-blue">
<i class="zmdi zmdi-calendar mfb-component__child-icon"></i>
</a>
</li>
<li>
<a href="patients.html" data-mfb-label="Patients List" class="mfb-component__button--child bg-orange">
<i class="zmdi zmdi-account-o mfb-component__child-icon"></i>
</a>
</li>
<li>
<a href="payments.html" data-mfb-label="Payments" class="mfb-component__button--child bg-purple">
<i class="zmdi zmdi-balance-wallet mfb-component__child-icon"></i>
</a>
</li>
</ul>
</li>
</ul>
<!-- #Float icon -->
<!-- Morphing Search -->
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form">
<div class="form-group m-0">
<input value="" type="search" placeholder="Explore Admin..." class="form-control morphsearch-input" />
<button class="morphsearch-submit" type="submit">Search</button>
</div>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2>Popular</h2>
<a class="dummy-media-object" href="#"> <img class="round" src="../../assets/images/xs/avatar5.jpg" alt=""/>
<h3>Sara Soueidan</h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="#"> <img class="round" src="../../assets/images/xs/avatar1.jpg" alt=""/>
<h3>Sara Soueidan</h3>
</a> <a class="dummy-media-object" href="#"> <img class="round" src="../../assets/images/xs/avatar5.jpg" alt=""/>
<h3>Rachel Smith</h3>
</a> </div>
</div>
<!-- /morphsearch-content -->
<span class="morphsearch-close"></span> </div>
<!-- Top Bar -->
<nav class="navbar clearHeader">
<div class="col-12">
<div class="navbar-header"> <a href="javascript:void(0);" class="bars"></a> <img src="../../assets/images/SyraHealth_Logo_Dark.svg" /> </div>
<ul class="nav navbar-nav navbar-right">
<!-- Notifications -->
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="zmdi zmdi-notifications"></i> <span class="label-count">7</span> </a>
<ul class="dropdown-menu">
<li class="header">NOTIFICATIONS</li>
<li class="body">
<ul class="menu">
<li> <a href="javascript:void(0);">
<div class="icon-circle bg-light-green"><i class="zmdi zmdi-account-add"></i></div>
<div class="menu-info">
<h4>12 new members joined</h4>
<p> <i class="material-icons">access_time</i> 14 mins ago </p>
</div>
</a> </li>
<li> <a href="javascript:void(0);">
<div class="icon-circle bg-cyan"><i class="zmdi zmdi-shopping-cart-plus"></i></div>
<div class="menu-info">
<h4>4 sales made</h4>
<p> <i class="material-icons">access_time</i> 22 mins ago </p>
</div>
</a> </li>
<li> <a href="javascript:void(0);">
<div class="icon-circle bg-purple"><i class="zmdi zmdi-settings"></i></div>
<div class="menu-info">
<h4>Settings updated</h4>
<p> <i class="material-icons">access_time</i> Yesterday </p>
</div>
</a> </li>
</ul>
</li>
<li class="footer"> <a href="javascript:void(0);">View All Notifications</a> </li>
</ul>
</li>
<!-- #END# Notifications -->
<!-- Tasks -->
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="zmdi zmdi-flag"></i><span class="label-count">9</span> </a>
<ul class="dropdown-menu">
<li class="header">TASKS</li>
<li class="body">
<ul class="menu tasks">
<li> <a href="javascript:void(0);">
<h4> Task 1 <small>32%</small> </h4>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 32%"> </div>
</div>
</a> </li>
</ul>
</li>
<li class="footer"> <a href="javascript:void(0);">View All Tasks</a> </li>
</ul>
</li>
<!-- #END# Tasks -->
<li><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="zmdi zmdi-settings"></i></a></li>
</ul>
</div>
</nav>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="admin-image"> <img src="../../assets/images/random-avatar7.jpg" alt=""> </div>
<div class="admin-action-info"> <span>Welcome</span>
<h3>Dr. John</h3>
<ul>
<li><a data-placement="bottom" title="Go to Inbox" href="mail-inbox.html"><i class="zmdi zmdi-email"></i></a></li>
<li><a data-placement="bottom" title="Go to Profile" href="profile.html"><i class="zmdi zmdi-account"></i></a></li>
<li><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="zmdi zmdi-settings"></i></a></li>
<li><a data-placement="bottom" title="Full Screen" href="sign-in.html" ><i class="zmdi zmdi-sign-in"></i></a></li>
</ul>
</div>
<div class="quick-stats">
<h5>Today Report</h5>
<ul>
<li><span>16<i>Patient</i></span></li>
<li><span>20<i>Panding</i></span></li>
<li><span>04<i>Visit</i></span></li>
</ul>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active open"><a href="index.html"><i class="zmdi zmdi-home"></i><span>Dashboard</span></a></li>
<li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-calendar-check"></i><span>Appointment</span> </a>
<ul class="ml-menu">
<li><a href="doctor-schedule.html">Doctor Schedule</a></li>
<li><a href="book-appointment.html">Book Appointment</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-account-add"></i><span>Doctors</span> </a>
<ul class="ml-menu">
<li><a href="doctors.html">All Doctors</a></li>
<li><a href="add-doctor.html">Add Doctor</a></li>
<li><a href="profile.html">Doctor Profile</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-account-o"></i><span>Patients</span> </a>
<ul class="ml-menu">
<li><a href="patients.html">All Patients</a></li>
<li><a href="add-patient.html">Add Patient</a></li>
<li><a href="patient-profile.html">Patient Profile</a></li>
<li><a href="patient-invoice.html">Patient Invoice</a></li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
</aside>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<aside id="rightsidebar" class="right-sidebar">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#skins">Skins</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#chat">Chat</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#settings">Setting</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane in active in active" id="skins">
<ul class="demo-choose-skin">
<li data-theme="red">
<div class="red"></div>
<span>Red</span> </li>
<li data-theme="purple">
<div class="purple"></div>
<span>Purple</span> </li>
<li data-theme="blue">
<div class="blue"></div>
<span>Blue</span> </li>
<li data-theme="cyan" class="active">
<div class="cyan"></div>
<span>Cyan</span> </li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="chat">
<div class="demo-settings">
<div class="search">
<div class="input-group">
<div class="form-line">
<input type="text" class="form-control" placeholder="Search..." required autofocus>
</div>
</div>
</div>
<h6>Recent</h6>
<ul>
<li class="online">
<div class="media">
<a role="button" tabindex="0"> <img class="media-object " src="../../assets/images/xs/avatar1.jpg" alt=""> </a>
<div class="media-body">
<span class="name">Claire Sassu</span> <span class="message">Can you share the...</span> <span class="badge badge-outline status"></span>
</div>
</div>
</li>
<li class="online">
<div class="media"> <a role="button" tabindex="0"> <img class="media-object " src="../../assets/images/xs/avatar2.jpg" alt=""> </a>
<div class="media-body">
<span class="name">Maggie jackson</span> <span class="message">Can you share the...</span> <span class="badge badge-outline status"></span>
</div>
</div>
</li>
<li class="online">
<div class="media"> <a role="button" tabindex="0"> <img class="media-object " src="../../assets/images/xs/avatar3.jpg" alt=""> </a>
<div class="media-body">
<span class="name">Joel King</span> <span class="message">Ready for the meeti...</span> <span class="badge badge-outline status"></span>
</div>
</div>
</li>
</ul>
<h6>Contacts</h6>
<ul>
<li class="offline">
<div class="media"> <a role="button" tabindex="0"> <img class="media-object " src="../../assets/images/xs/avatar4.jpg" alt=""> </a>
<div class="media-body">
<span class="name">Joel King</span> <span class="badge badge-outline status"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="demo-settings">
<p>GENERAL SETTINGS</p>
<ul class="setting-list">
<li> <span>Report Panel Usage</span>
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span></label>
</div>
</li>
<li> <span>Email Redirect</span>
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span></label>
</div>
</li>
</ul>
<p>ACCOUNT SETTINGS</p>
<ul class="setting-list">
<li> <span>Location Permission</span>
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</aside>
<!-- #END# Right Sidebar -->
</section>
home.component.html
<section class="content home">
<div class="container-fluid">
<div class="block-header">
<h2>Dashboard</h2>
</div>
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="info-box-4 hover-zoom-effect">
<div class="icon"> <i class="zmdi zmdi-account col-blue"></i> </div>
<div class="content">
<div class="text">New Patient</div>
<div class="number">27</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="info-box-4 hover-zoom-effect">
<div class="icon"> <i class="zmdi zmdi-account col-green"></i> </div>
<div class="content">
<div class="text">OPD Patient</div>
<div class="number">12</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="info-box-4 hover-zoom-effect">
<div class="icon"> <i class="zmdi zmdi-bug col-blush"></i> </div>
<div class="content">
<div class="text">Today's Operations</div>
<div class="number">05</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="info-box-4 hover-zoom-effect">
<div class="icon"> <i class="zmdi zmdi-balance col-cyan"></i> </div>
<div class="content">
<div class="text">Hospital Earning</div>
<div class="number">$3,540</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card">
<div class="header">
<h2>Hospital Survey</h2>
<ul class="header-dropdown">
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu float-right">
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<canvas id="line_chart" height="70"></canvas>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card">
<div class="header">
<h2>New Patient <small >18% High then last month</small></h2>
<ul class="header-dropdown">
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu float-right">
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div class="stats-report">
<div class="stat-item">
<h5>Overall</h5>
<b class="col-indigo">70.40%</b></div>
<div class="stat-item">
<h5>Montly</h5>
<b class="col-indigo">25.80%</b></div>
<div class="stat-item">
<h5>Day</h5>
<b class="col-indigo">12.50%</b></div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card">
<div class="header">
<h2> New Patient List <small>Description text here...</small> </h2>
<ul class="header-dropdown">
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="zmdi zmdi-more-vert"></i></a>
</li>
</ul>
</div>
<div class="body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Diseases</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Virginia </td>
<td>Rose</td>
<td>@Rose</td>
<td><span class="label label-danger">Fever</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="card">
<div class="header">
<h2>Visits from countries</h2>
</div>
<div class="body">
<ul class="country-state">
<li class="m-b-20">
<h4 class="m-b-0">6350</h4> <small>From India</small>
<div class="float-right">58%</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:58%;"> <span class="sr-only">58% Complete</span></div>
</div>
</li>
<li class="m-b-20">
<h4 class="m-b-0">3250</h4> <small>From UAE</small>
<div class="float-right">90%</div>
<div class="progress">
<div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="card">
<div class="header">
<h2>PATIENT prograss</h2>
<ul class="header-dropdown">
<li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu float-right">
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Action</a></li>
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Another action</a></li>
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<ul class="basic-list">
<li>Mark Otto <span class="label-danger label">21%</span></li>
<li>Jacob Thornton <span class="label-purple label">50%</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="color-bg"></div>
index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>:: Syra Health - Hospital Admin ::</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- Swift Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>
<body class="theme-cyan">
<app-root></app-root>
</body>
</html>
Here is the code to include all the external Jquery files in angular project. I have included my files in "scripts" tag in angular.json file.
angular.json file
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/assets/bundles/libscripts.bundle.js",
"src/assets/bundles/morphingsearchscripts.bundle.js",
"src/assets/bundles/vendorscripts.bundle.js",
"src/assets/plugins/jquery-sparkline/jquery.sparkline.min.js",
"src/assets/plugins/chartjs/Chart.bundle.min.js",
"src/assets/bundles/mainscripts.bundle.js",
"src/assets/bundles/morphingscripts.bundle.js",
"src/assets/js/pages/index.js",
"src/assets/js/pages/charts/sparkline.min.js"
]
But the toggle button and the clickables are not working on the page. Please guide me on how to make the page working in angular.
Clicking on the '+' icon should open the toggle menu. clicking on the 'bell icon' should open notification menu.
But these are not working.
Please help.
