Post
Ask Question

Integrating Theme In Angular 7

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.


Similar Articles