Introduction

Themes are very useful and save a lot of our time while designing and making the site responsive. Here, we will learn to implement them in an Angular 7 app.
First of all, download the latest version of AdminLTE theme or whatever theme you prefer. For AdminLTE, you can get the latest version from here.

Create a new project in Angular 7 by typing the following command.

Once the project is created, open it and create various components like sidebar, menubar, etc. by typing the following commands.
  1. ng g c theme-header
  2. ng g c theme-menu
  3. ng g c theme-footer
  4. ng g c theme-setting
  5. ng g c dashboard
Open the zip file from the download location and copy the following files in the assets folder for your Angular application.
It should be present here.
Open the index.html file and add the following code in it. We have to add the CSS and JS files for all the pages here which we are going to use.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ThemeIntegrationAngular7</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. <link rel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="assets/bower_components/font-awesome/css/font-awesome.min.css">
  11. <link rel="stylesheet" href="assets/bower_components/Ionicons/css/ionicons.min.css">
  12. <link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
  13. <link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
  14. </head>
  15. <body class="hold-transition skin-blue fixed sidebar-mini">
  16. <app-root>
  17. <div class="wrapper"></div>
  18. </app-root>
  19. <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
  20. <script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  21. <script src="assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
  22. <script src="assets/bower_components/fastclick/lib/fastclick.js"></script>
  23. <script src="assets/dist/js/adminlte.min.js"></script>
  24. <script src="assets/dist/js/demo.js"></script>
  25. </body>
  26. </html>
Open the theme-header.component.html file and add the following code in it.
  1. <header class="main-header">
  2. <!-- Logo -->
  3. <a href="index2.html" class="logo">
  4. <!-- mini logo for sidebar mini 50x50 pixels -->
  5. <span class="logo-mini"><b>A</b>LT</span>
  6. <!-- logo for regular state and mobile devices -->
  7. <span class="logo-lg"><b>Admin</b>LTE</span>
  8. </a>
  9. <!-- Header Navbar: style can be found in header.less -->
  10. <nav class="navbar navbar-static-top">
  11. <!-- Sidebar toggle button-->
  12. <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
  13. <span class="sr-only">Toggle navigation</span>
  14. </a>
  15. <div class="navbar-custom-menu">
  16. <ul class="nav navbar-nav">
  17. <!-- Messages: style can be found in dropdown.less-->
  18. <li class="dropdown messages-menu">
  19. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  20. <i class="fa fa-envelope-o"></i>
  21. <span class="label label-success">4</span>
  22. </a>
  23. <ul class="dropdown-menu">
  24. <li class="header">You have 4 messages</li>
  25. <li>
  26. <!-- inner menu: contains the actual data -->
  27. <ul class="menu">
  28. <li><!-- start message -->
  29. <a href="#">
  30. <div class="pull-left">
  31. <img src="../../assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  32. </div>
  33. <h4>
  34. Support Team
  35. <small><i class="fa fa-clock-o"></i> 5 mins</small>
  36. </h4>
  37. <p>Why not buy a new awesome theme?</p>
  38. </a>
  39. </li>
  40. <!-- end message -->
  41. <li>
  42. <a href="#">
  43. <div class="pull-left">
  44. <img src="../../assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  45. </div>
  46. <h4>
  47. AdminLTE Design Team
  48. <small><i class="fa fa-clock-o"></i> 2 hours</small>
  49. </h4>
  50. <p>Why not buy a new awesome theme?</p>
  51. </a>
  52. </li>
  53. <li>
  54. <a href="#">
  55. <div class="pull-left">
  56. <img src="../../assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  57. </div>
  58. <h4>
  59. Developers
  60. <small><i class="fa fa-clock-o"></i> Today</small>
  61. </h4>
  62. <p>Why not buy a new awesome theme?</p>
  63. </a>
  64. </li>
  65. <li>
  66. <a href="#">
  67. <div class="pull-left">
  68. <img src="../../assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  69. </div>
  70. <h4>
  71. Sales Department
  72. <small><i class="fa fa-clock-o"></i> Yesterday</small>
  73. </h4>
  74. <p>Why not buy a new awesome theme?</p>
  75. </a>
  76. </li>
  77. <li>
  78. <a href="#">
  79. <div class="pull-left">
  80. <img src="../../assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  81. </div>
  82. <h4>
  83. Reviewers
  84. <small><i class="fa fa-clock-o"></i> 2 days</small>
  85. </h4>
  86. <p>Why not buy a new awesome theme?</p>
  87. </a>
  88. </li>
  89. </ul>
  90. </li>
  91. <li class="footer"><a href="#">See All Messages</a></li>
  92. </ul>
  93. </li>
  94. <!-- Notifications: style can be found in dropdown.less -->
  95. <li class="dropdown notifications-menu">
  96. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  97. <i class="fa fa-bell-o"></i>
  98. <span class="label label-warning">10</span>
  99. </a>
  100. <ul class="dropdown-menu">
  101. <li class="header">You have 10 notifications</li>
  102. <li>
  103. <!-- inner menu: contains the actual data -->
  104. <ul class="menu">
  105. <li>
  106. <a href="#">
  107. <i class="fa fa-users text-aqua"></i> 5 new members joined today
  108. </a>
  109. </li>
  110. <li>
  111. <a href="#">
  112. <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
  113. page and may cause design problems
  114. </a>
  115. </li>
  116. <li>
  117. <a href="#">
  118. <i class="fa fa-users text-red"></i> 5 new members joined
  119. </a>
  120. </li>
  121. <li>
  122. <a href="#">
  123. <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  124. </a>
  125. </li>
  126. <li>
  127. <a href="#">
  128. <i class="fa fa-user text-red"></i> You changed your username
  129. </a>
  130. </li>
  131. </ul>
  132. </li>
  133. <li class="footer"><a href="#">View all</a></li>
  134. </ul>
  135. </li>
  136. <!-- Tasks: style can be found in dropdown.less -->
  137. <li class="dropdown tasks-menu">
  138. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  139. <i class="fa fa-flag-o"></i>
  140. <span class="label label-danger">9</span>
  141. </a>
  142. <ul class="dropdown-menu">
  143. <li class="header">You have 9 tasks</li>
  144. <li>
  145. <!-- inner menu: contains the actual data -->
  146. <ul class="menu">
  147. <li><!-- Task item -->
  148. <a href="#">
  149. <h3>
  150. Design some buttons
  151. <small class="pull-right">20%</small>
  152. </h3>
  153. <div class="progress xs">
  154. <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
  155. aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  156. <span class="sr-only">20% Complete</span>
  157. </div>
  158. </div>
  159. </a>
  160. </li>
  161. <!-- end task item -->
  162. <li><!-- Task item -->
  163. <a href="#">
  164. <h3>
  165. Create a nice theme
  166. <small class="pull-right">40%</small>
  167. </h3>
  168. <div class="progress xs">
  169. <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"
  170. aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  171. <span class="sr-only">40% Complete</span>
  172. </div>
  173. </div>
  174. </a>
  175. </li>
  176. <!-- end task item -->
  177. <li><!-- Task item -->
  178. <a href="#">
  179. <h3>
  180. Some task I need to do
  181. <small class="pull-right">60%</small>
  182. </h3>
  183. <div class="progress xs">
  184. <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"
  185. aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  186. <span class="sr-only">60% Complete</span>
  187. </div>
  188. </div>
  189. </a>
  190. </li>
  191. <!-- end task item -->
  192. <li><!-- Task item -->
  193. <a href="#">
  194. <h3>
  195. Make beautiful transitions
  196. <small class="pull-right">80%</small>
  197. </h3>
  198. <div class="progress xs">
  199. <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"
  200. aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  201. <span class="sr-only">80% Complete</span>
  202. </div>
  203. </div>
  204. </a>
  205. </li>
  206. <!-- end task item -->
  207. </ul>
  208. </li>
  209. <li class="footer">
  210. <a href="#">View all tasks</a>
  211. </li>
  212. </ul>
  213. </li>
  214. <!-- User Account: style can be found in dropdown.less -->
  215. <li class="dropdown user user-menu">
  216. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  217. <img src="../../assets/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
  218. <span class="hidden-xs">Alexander Pierce</span>
  219. </a>
  220. <ul class="dropdown-menu">
  221. <!-- User image -->
  222. <li class="user-header">
  223. <img src="../../assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  224. <p>
  225. Alexander Pierce - Web Developer
  226. <small>Member since Nov. 2012</small>
  227. </p>
  228. </li>
  229. <!-- Menu Body -->
  230. <li class="user-body">
  231. <div class="row">
  232. <div class="col-xs-4 text-center">
  233. <a href="#">Followers</a>
  234. </div>
  235. <div class="col-xs-4 text-center">
  236. <a href="#">Sales</a>
  237. </div>
  238. <div class="col-xs-4 text-center">
  239. <a href="#">Friends</a>
  240. </div>
  241. </div>
  242. <!-- /.row -->
  243. </li>
  244. <!-- Menu Footer-->
  245. <li class="user-footer">
  246. <div class="pull-left">
  247. <a href="#" class="btn btn-default btn-flat">Profile</a>
  248. </div>
  249. <div class="pull-right">
  250. <a href="#" class="btn btn-default btn-flat">Sign out</a>
  251. </div>
  252. </li>
  253. </ul>
  254. </li>
  255. <!-- Control Sidebar Toggle Button -->
  256. <li>
  257. <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  258. </li>
  259. </ul>
  260. </div>
  261. </nav>
  262. </header>
Open the theme-menu.component.html file and add the following code in it.
  1. <aside class="main-sidebar">
  2. <!-- sidebar: style can be found in sidebar.less -->
  3. <section class="sidebar">
  4. <!-- Sidebar user panel -->
  5. <div class="user-panel">
  6. <div class="pull-left image">
  7. <img src="../../assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  8. </div>
  9. <div class="pull-left info">
  10. <p>Alexander Pierce</p>
  11. <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  12. </div>
  13. </div>
  14. <!-- search form -->
  15. <form action="#" method="get" class="sidebar-form">
  16. <div class="input-group">
  17. <input type="text" name="q" class="form-control" placeholder="Search...">
  18. <span class="input-group-btn">
  19. <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
  20. </button>
  21. </span>
  22. </div>
  23. </form>
  24. <!-- /.search form -->
  25. <!-- sidebar menu: : style can be found in sidebar.less -->
  26. <ul class="sidebar-menu" data-widget="tree">
  27. <li class="header">MAIN NAVIGATION</li>
  28. <li class="active treeview">
  29. <a href="#">
  30. <i class="fa fa-dashboard"></i> <span>Dashboard</span>
  31. <span class="pull-right-container">
  32. <i class="fa fa-angle-left pull-right"></i>
  33. </span>
  34. </a>
  35. <ul class="treeview-menu">
  36. <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
  37. <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
  38. </ul>
  39. </li>
  40. <li class="treeview">
  41. <a href="#">
  42. <i class="fa fa-files-o"></i>
  43. <span>Layout Options</span>
  44. <span class="pull-right-container">
  45. <span class="label label-primary pull-right">4</span>
  46. </span>
  47. </a>
  48. <ul class="treeview-menu">
  49. <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
  50. <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
  51. <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
  52. <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
  53. </ul>
  54. </li>
  55. <li>
  56. <a href="pages/widgets.html">
  57. <i class="fa fa-th"></i> <span>Widgets</span>
  58. <span class="pull-right-container">
  59. <small class="label pull-right bg-green">new</small>
  60. </span>
  61. </a>
  62. </li>
  63. <li class="treeview">
  64. <a href="#">
  65. <i class="fa fa-pie-chart"></i>
  66. <span>Charts</span>
  67. <span class="pull-right-container">
  68. <i class="fa fa-angle-left pull-right"></i>
  69. </span>
  70. </a>
  71. <ul class="treeview-menu">
  72. <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
  73. <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
  74. <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
  75. <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
  76. </ul>
  77. </li>
  78. <li class="treeview">
  79. <a href="#">
  80. <i class="fa fa-laptop"></i>
  81. <span>UI Elements</span>
  82. <span class="pull-right-container">
  83. <i class="fa fa-angle-left pull-right"></i>
  84. </span>
  85. </a>
  86. <ul class="treeview-menu">
  87. <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
  88. <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
  89. <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
  90. <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
  91. <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
  92. <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
  93. </ul>
  94. </li>
  95. <li class="treeview">
  96. <a href="#">
  97. <i class="fa fa-edit"></i> <span>Forms</span>
  98. <span class="pull-right-container">
  99. <i class="fa fa-angle-left pull-right"></i>
  100. </span>
  101. </a>
  102. <ul class="treeview-menu">
  103. <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
  104. <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
  105. <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
  106. </ul>
  107. </li>
  108. <li class="treeview">
  109. <a href="#">
  110. <i class="fa fa-table"></i> <span>Tables</span>
  111. <span class="pull-right-container">
  112. <i class="fa fa-angle-left pull-right"></i>
  113. </span>
  114. </a>
  115. <ul class="treeview-menu">
  116. <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
  117. <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
  118. </ul>
  119. </li>
  120. <li>
  121. <a href="pages/calendar.html">
  122. <i class="fa fa-calendar"></i> <span>Calendar</span>
  123. <span class="pull-right-container">
  124. <small class="label pull-right bg-red">3</small>
  125. <small class="label pull-right bg-blue">17</small>
  126. </span>
  127. </a>
  128. </li>
  129. <li>
  130. <a href="pages/mailbox/mailbox.html">
  131. <i class="fa fa-envelope"></i> <span>Mailbox</span>
  132. <span class="pull-right-container">
  133. <small class="label pull-right bg-yellow">12</small>
  134. <small class="label pull-right bg-green">16</small>
  135. <small class="label pull-right bg-red">5</small>
  136. </span>
  137. </a>
  138. </li>
  139. <li class="treeview">
  140. <a href="#">
  141. <i class="fa fa-folder"></i> <span>Examples</span>
  142. <span class="pull-right-container">
  143. <i class="fa fa-angle-left pull-right"></i>
  144. </span>
  145. </a>
  146. <ul class="treeview-menu">
  147. <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
  148. <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
  149. <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
  150. <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
  151. <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
  152. <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
  153. <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
  154. <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
  155. <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
  156. </ul>
  157. </li>
  158. <li class="treeview">
  159. <a href="#">
  160. <i class="fa fa-share"></i> <span>Multilevel</span>
  161. <span class="pull-right-container">
  162. <i class="fa fa-angle-left pull-right"></i>
  163. </span>
  164. </a>
  165. <ul class="treeview-menu">
  166. <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
  167. <li class="treeview">
  168. <a href="#"><i class="fa fa-circle-o"></i> Level One
  169. <span class="pull-right-container">
  170. <i class="fa fa-angle-left pull-right"></i>
  171. </span>
  172. </a>
  173. <ul class="treeview-menu">
  174. <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
  175. <li class="treeview">
  176. <a href="#"><i class="fa fa-circle-o"></i> Level Two
  177. <span class="pull-right-container">
  178. <i class="fa fa-angle-left pull-right"></i>
  179. </span>
  180. </a>
  181. <ul class="treeview-menu">
  182. <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
  183. <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
  184. </ul>
  185. </li>
  186. </ul>
  187. </li>
  188. <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
  189. </ul>
  190. </li>
  191. <li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
  192. <li class="header">LABELS</li>
  193. <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
  194. <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
  195. <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
  196. </ul>
  197. </section>
  198. <!-- /.sidebar -->
  199. </aside>
Open the theme-footer.component.html file and add the following code in it.
  1. <footer class="main-footer">
  2. <div class="pull-right hidden-xs">
  3. <b>Version</b> 2.4.13
  4. </div>
  5. <strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE</a>.</strong> All rights
  6. reserved.
  7. </footer>
Open the theme-setting.component.html file and add the following code in it.
  1. <aside class="control-sidebar control-sidebar-dark" style="display: none;">
  2. <!-- Create the tabs -->
  3. <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  4. <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  5. <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  6. </ul>
  7. <!-- Tab panes -->
  8. <div class="tab-content">
  9. <!-- Home tab content -->
  10. <div class="tab-pane" id="control-sidebar-home-tab">
  11. <h3 class="control-sidebar-heading">Recent Activity</h3>
  12. <ul class="control-sidebar-menu">
  13. <li>
  14. <a href="javascript:void(0)">
  15. <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  16. <div class="menu-info">
  17. <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  18. <p>Will be 23 on April 24th</p>
  19. </div>
  20. </a>
  21. </li>
  22. <li>
  23. <a href="javascript:void(0)">
  24. <i class="menu-icon fa fa-user bg-yellow"></i>
  25. <div class="menu-info">
  26. <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
  27. <p>New phone +1(800)555-1234</p>
  28. </div>
  29. </a>
  30. </li>
  31. <li>
  32. <a href="javascript:void(0)">
  33. <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
  34. <div class="menu-info">
  35. <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
  36. <p>[email protected]</p>
  37. </div>
  38. </a>
  39. </li>
  40. <li>
  41. <a href="javascript:void(0)">
  42. <i class="menu-icon fa fa-file-code-o bg-green"></i>
  43. <div class="menu-info">
  44. <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
  45. <p>Execution time 5 seconds</p>
  46. </div>
  47. </a>
  48. </li>
  49. </ul>
  50. <!-- /.control-sidebar-menu -->
  51. <h3 class="control-sidebar-heading">Tasks Progress</h3>
  52. <ul class="control-sidebar-menu">
  53. <li>
  54. <a href="javascript:void(0)">
  55. <h4 class="control-sidebar-subheading">
  56. Custom Template Design
  57. <span class="label label-danger pull-right">70%</span>
  58. </h4>
  59. <div class="progress progress-xxs">
  60. <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  61. </div>
  62. </a>
  63. </li>
  64. <li>
  65. <a href="javascript:void(0)">
  66. <h4 class="control-sidebar-subheading">
  67. Update Resume
  68. <span class="label label-success pull-right">95%</span>
  69. </h4>
  70. <div class="progress progress-xxs">
  71. <div class="progress-bar progress-bar-success" style="width: 95%"></div>
  72. </div>
  73. </a>
  74. </li>
  75. <li>
  76. <a href="javascript:void(0)">
  77. <h4 class="control-sidebar-subheading">
  78. Laravel Integration
  79. <span class="label label-warning pull-right">50%</span>
  80. </h4>
  81. <div class="progress progress-xxs">
  82. <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
  83. </div>
  84. </a>
  85. </li>
  86. <li>
  87. <a href="javascript:void(0)">
  88. <h4 class="control-sidebar-subheading">
  89. Back End Framework
  90. <span class="label label-primary pull-right">68%</span>
  91. </h4>
  92. <div class="progress progress-xxs">
  93. <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
  94. </div>
  95. </a>
  96. </li>
  97. </ul>
  98. <!-- /.control-sidebar-menu -->
  99. </div>
  100. <!-- /.tab-pane -->
  101. <!-- Stats tab content -->
  102. <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
  103. <!-- /.tab-pane -->
  104. <!-- Settings tab content -->
  105. <div class="tab-pane" id="control-sidebar-settings-tab">
  106. <form method="post">
  107. <h3 class="control-sidebar-heading">General Settings</h3>
  108. <div class="form-group">
  109. <label class="control-sidebar-subheading">
  110. Report panel usage
  111. <input type="checkbox" class="pull-right" checked>
  112. </label>
  113. <p>
  114. Some information about this general settings option
  115. </p>
  116. </div>
  117. <!-- /.form-group -->
  118. <div class="form-group">
  119. <label class="control-sidebar-subheading">
  120. Allow mail redirect
  121. <input type="checkbox" class="pull-right" checked>
  122. </label>
  123. <p>
  124. Other sets of options are available
  125. </p>
  126. </div>
  127. <!-- /.form-group -->
  128. <div class="form-group">
  129. <label class="control-sidebar-subheading">
  130. Expose author name in posts
  131. <input type="checkbox" class="pull-right" checked>
  132. </label>
  133. <p>
  134. Allow the user to show his name in blog posts
  135. </p>
  136. </div>
  137. <!-- /.form-group -->
  138. <h3 class="control-sidebar-heading">Chat Settings</h3>
  139. <div class="form-group">
  140. <label class="control-sidebar-subheading">
  141. Show me as online
  142. <input type="checkbox" class="pull-right" checked>
  143. </label>
  144. </div>
  145. <!-- /.form-group -->
  146. <div class="form-group">
  147. <label class="control-sidebar-subheading">
  148. Turn off notifications
  149. <input type="checkbox" class="pull-right">
  150. </label>
  151. </div>
  152. <!-- /.form-group -->
  153. <div class="form-group">
  154. <label class="control-sidebar-subheading">
  155. Delete chat history
  156. <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
  157. </label>
  158. </div>
  159. <!-- /.form-group -->
  160. </form>
  161. </div>
  162. <!-- /.tab-pane -->
  163. </div>
  164. </aside>
  165. <div class="control-sidebar-bg"></div>
Open the app.component.html file and add the following code in it.
  1. <app-theme-header></app-theme-header>
  2. <app-theme-menu></app-theme-menu>
  3. <app-dashboard></app-dashboard>
  4. <router-outlet></router-outlet>
  5. <app-theme-footer></app-theme-footer>
  6. <app-theme-setting></app-theme-setting>
Open the dashboard.component.html file and add the following code in it.
  1. <div class="content-wrapper">
  2. <!-- Content Header (Page header) -->
  3. <section class="content-header">
  4. <h1>
  5. Fixed Layout
  6. <small>Blank example to the fixed layout</small>
  7. </h1>
  8. <ol class="breadcrumb">
  9. <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
  10. <li><a href="#">Layout</a></li>
  11. <li class="active">Fixed</li>
  12. </ol>
  13. </section>
  14. <!-- Main content -->
  15. <section class="content">
  16. <div class="callout callout-info">
  17. <h4>Tip!</h4>
  18. <p>Add the fixed class to the body tag to get this layout. The fixed layout is your best option if your sidebar
  19. is bigger than your content because it prevents extra unwanted scrolling.</p>
  20. </div>
  21. <!-- Default box -->
  22. <div class="box">
  23. <div class="box-header with-border">
  24. <h3 class="box-title">Title</h3>
  25. <div class="box-tools pull-right">
  26. <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
  27. <i class="fa fa-minus"></i></button>
  28. <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
  29. <i class="fa fa-times"></i></button>
  30. </div>
  31. </div>
  32. <div class="box-body">
  33. Start creating your amazing application!
  34. </div>
  35. <!-- /.box-body -->
  36. <div class="box-footer">
  37. Footer
  38. </div>
  39. <!-- /.box-footer-->
  40. </div>
  41. <!-- /.box -->
  42. </section>
  43. <!-- /.content -->
  44. </div>
  45. <router-outlet></router-outlet>
That’s it. Run the application by typing the ng serve command.
Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.