Hii, Angular Folks, We will discuss today How to integrate the admin template in the Angular application. We are using Angular Command Line Interface(Angular-CLI) as a kick-starter of the application. Angular is a client-side JavaScript framework that is very fast for building Single Page Applications.
Single Page Application(SPA) is an application where you do not require more than one page, and it is handled by different components. Also, to display another component, we use the Angular Routing concept to change the template dynamically as per our logic.
We can use the Angular core module for these kinds of awesome stuff. Angular is also providing us an HTTP module to send the network request to the servers. It gets the response in JSON and is easily handled by Angular’s components.
Angular is fully based on the TypeScript language created by Microsoft. If you want to know more about the TypeScript language, check out my other tutorial on this blog: Beginner’s Guide To Setup TypeScript With Webpack.
Note: If you want to use Angular, then on your server, you had installed Node.js
Integrate admin template in Angular application
We are using Angular Kickstarter, so first, we need to download that Angular CLI, and then we need to create our project.
Integrate the admin template in the Angular application is easy to get with. So let us dive in.
You can upgrade your Angular CLI, or you can install it from scratch. Below is the step to install from scratch.
Step: 1
If you are in Windows, then open your CMD in Administrator mode and type the following command.
npm install -g @angular/cli
If you are on a Mac or Linux, type the following command.
sudo npm install -g @angular/cli
It will take some time to download the CLI and then install NPM packages.
Step: 2
Type the following command in your terminal.
ng new projectname
This will create required folders to Up and Running with our Application and install all the NPM packages. This will also take a while.
Step: 3
Go to that project directory and type the following command in your terminal.
cd projectname
Now to start our Angular application, type the following command.
ng serve
You can also hit the below command.
npm start
In your command window, you can see the compilation process is already started, and finally, a webpack is compiled, and our application will be hosted on http://localhost:4200.
I have named my project angular so; its directory structure will look like this.
Step: 4
We first need to choose which admin template we need to integrate, so in this project, I have chosen Material Design Template. It is an HTML and CSS template, which we need to integrate into our Angular application.
Angular app’s main index.html file has the following code.
<!-- index.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular4</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
If you see carefully in the above file, then in the body tag, you can see our Angular-specific tag like <app-root> </app-root>. This tag helps us to bootstrap our application.
Step: 5
If you navigate to src >> app >> app.component.html, then this file has default view, which is what we see right now. So first of all, clean that whole file, and when you save that file, the webpack will automatically compile and restart the server, and your browser will be automatically refreshed, and you can see your updated changes.
src >> main.ts: This file is our starter file, which bootstraps our Angular Application. It includes our app module file, which resides in src >> app >>app.module.ts
Our src >> main.ts file will look like this.
// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
Step: 6
Now go to src >> app >> app.module.ts: This file is a module in which all our new application-specific components are residing. This file looks like this.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here right now, we have only one component that is there so, AppComponent is imported in this file.
Step: 7
Navigate to src >> app >> app.component.ts: This file is the kind of Controller file for your particular component, you can say. This file is a TypeScript class file that has the template and related to CSS is defined. So that particular component will use that particular HTML and CSS. So this file looks like this.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
Step: 8
We need to define our components, and if we want to build an admin template, we first need to divide our HTML Material template into Navbar, Sidebar, and Content areas. So, we need to create that particular component. So we can generate new components by typing the following command.
ng generate component navbar or ng g c navbar
This created a folder in the src >> app directory called the navbar. If you open that folder, then you can see its HTML file, TypeScript file, and also a test file. Also, after creating your component, the app.module.ts file is automatically updated.
Step: 9
First, we need to include all of our admin template-specific CSS, JS and Images, and store them into the src >> assets folder. So your index.html file will look like this.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to project</title>
<base href="/">
<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" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<!-- Bootstrap Core Css -->
<link href="assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<!-- Waves Effect Css -->
<link href="assets/plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="assets/plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
<!-- Custom Css -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<!-- <link href="public/plugins/morrisjs/morris.css" rel="stylesheet" /> -->
</head>
<body class="theme-red">
<app-root></app-root>
<!-- Jquery Core Js -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="assets/plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<!-- <script src="plugins/bootstrap-select/js/bootstrap-select.js"></script> -->
<!-- Slimscroll Plugin Js -->
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="assets/plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="assets/plugins/jquery-countto/jquery.countTo.js"></script>
<script src="assets/js/admin.js"></script>
<script src="assets/js/pages/index.js"></script>
</body>
</html>
Copy all the CSS, JS, Images, and Plugin files from the Material Admin Template to the src >> assets folder.
Step: 10
You can add the following code to the navbar.component.html.
<!-- navbar.component.html -->
<!-- Page Loader -->
<!-- <div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<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> -->
<div class="overlay"></div>
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
<a href="javascript:void(0);" class="bars"></a>
<a class="navbar-brand" routerLink="/dashboard">ERPCMS</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Call Search -->
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
<!-- #END# Call Search -->
<!-- Notifications -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">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="material-icons">person_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="material-icons">add_shopping_cart</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-red">
<i class="material-icons">delete_forever</i>
</div>
<div class="menu-info">
<h4><b>Nancy Doe</b> deleted account</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-orange">
<i class="material-icons">mode_edit</i>
</div>
<div class="menu-info">
<h4><b>Nancy</b> changed name</h4>
<p>
<i class="material-icons">access_time</i> 2 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-blue-grey">
<i class="material-icons">comment</i>
</div>
<div class="menu-info">
<h4><b>John</b> commented your post</h4>
<p>
<i class="material-icons">access_time</i> 4 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">cached</i>
</div>
<div class="menu-info">
<h4><b>John</b> updated status</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-purple">
<i class="material-icons">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="material-icons">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>
Footer display issue
<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>
<li>
<a href="javascript:void(0);">
<h4>
Make new buttons
<small>45%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-cyan" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Create new dashboard
<small>54%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 54%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Solve transition issue
<small>65%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Answer GitHub questions
<small>92%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
<a href="javascript:void(0);">View All Tasks</a>
</li>
</ul>
</li>
<!-- #END# Tasks -->
<li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</div>
</nav>
<!-- #Top Bar -->
Step: 11
Put the following code into the src >> app >> app.component.html.
<!-- app.component.html --> <app-navbar></app-navbar>
Go to the navbar.component.ts file.
// navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
So finally, your page will look like this with only Navigation Bar.
Step: 12
We need to create another two components: 1) Sidebar 2)Content. Again, use the same method to generate components.
ng g c sidebar
ng g c content
Step: 13
Put the following code into the src >> app >> sidebar >> sidebar.component.html
<!-- sidebar.component.html -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="image">
<img src="assets/images/user.png" width="48" height="48" alt="User" />
</div>
<div class="info-container">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>
<div class="email">john.doe@example.com</div>
<div class="btn-group user-helper-dropdown">
<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
<li role="seperator" class="divider"></li>
<li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
<li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
<li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
<li role="seperator" class="divider"></li>
<li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
</ul>
</div>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">view_list</i>
<span>Users</span>
</a>
<ul class="ml-menu">
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="pages/tables/jquery-datatable.html">Customers</a>
</li>
<li>
<a href="pages/tables/editable-table.html">Suppliers</a>
</li>
</ul>
</li>
<li>
<a href="pages/helper-classes.html">
<i class="material-icons">layers</i>
<span>Helper Classes</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">widgets</i>
<span>Widgets</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Cards</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/widgets/cards/basic.html">Basic</a>
</li>
<li>
<a href="pages/widgets/cards/colored.html">Colored</a>
</li>
<li>
<a href="pages/widgets/cards/no-header.html">No Header</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Infobox</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/widgets/infobox/infobox-1.html">Infobox-1</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-2.html">Infobox-2</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-3.html">Infobox-3</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-4.html">Infobox-4</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-5.html">Infobox-5</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">swap_calls</i>
<span>User Interface (UI)</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/ui/alerts.html">Alerts</a>
</li>
<li>
<a href="pages/ui/animations.html">Animations</a>
</li>
<li>
<a href="pages/ui/badges.html">Badges</a>
</li>
<li>
<a href="pages/ui/breadcrumbs.html">Breadcrumbs</a>
</li>
<li>
<a href="pages/ui/buttons.html">Buttons</a>
</li>
<li>
<a href="pages/ui/collapse.html">Collapse</a>
</li>
<li>
<a href="pages/ui/colors.html">Colors</a>
</li>
<li>
<a href="pages/ui/dialogs.html">Dialogs</a>
</li>
<li>
<a href="pages/ui/icons.html">Icons</a>
</li>
<li>
<a href="pages/ui/labels.html">Labels</a>
</li>
<li>
<a href="pages/ui/list-group.html">List Group</a>
</li>
<li>
<a href="pages/ui/media-object.html">Media Object</a>
</li>
<li>
<a href="pages/ui/modals.html">Modals</a>
</li>
<li>
<a href="pages/ui/notifications.html">Notifications</a>
</li>
<li>
<a href="pages/ui/pagination.html">Pagination</a>
</li>
<li>
<a href="pages/ui/preloaders.html">Preloaders</a>
</li>
<li>
<a href="pages/ui/progressbars.html">Progress Bars</a>
</li>
<li>
<a href="pages/ui/range-sliders.html">Range Sliders</a>
</li>
<li>
<a href="pages/ui/sortable-nestable.html">Sortable & Nestable</a>
</li>
<li>
<a href="pages/ui/tabs.html">Tabs</a>
</li>
<li>
<a href="pages/ui/thumbnails.html">Thumbnails</a>
</li>
<li>
<a href="pages/ui/tooltips-popovers.html">Tooltips & Popovers</a>
</li>
<li>
<a href="pages/ui/waves.html">Waves</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">assignment</i>
<span>Forms</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/forms/basic-form-elements.html">Basic Form Elements</a>
</li>
<li>
<a href="pages/forms/advanced-form-elements.html">Advanced Form Elements</a>
</li>
<li>
<a href="pages/forms/form-examples.html">Form Examples</a>
</li>
<li>
<a href="pages/forms/form-validation.html">Form Validation</a>
</li>
<li>
<a href="pages/forms/form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="pages/forms/editors.html">Editors</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">view_list</i>
<span>Tables</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/tables/normal-tables.html">Normal Tables</a>
</li>
<li>
<a href="pages/tables/jquery-datatable.html">Jquery Datatables</a>
</li>
<li>
<a href="pages/tables/editable-table.html">Editable Tables</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">perm_media</i>
<span>Medias</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/medias/image-gallery.html">Image Gallery</a>
</li>
<li>
<a href="pages/medias/carousel.html">Carousel</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">pie_chart</i>
<span>Charts</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/charts/morris.html">Morris</a>
</li>
<li>
<a href="pages/charts/flot.html">Flot</a>
</li>
<li>
<a href="pages/charts/chartjs.html">ChartJS</a>
</li>
<li>
<a href="pages/charts/sparkline.html">Sparkline</a>
</li>
<li>
<a href="pages/charts/jquery-knob.html">Jquery Knob</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">content_copy</i>
<span>Example Pages</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/examples/sign-in.html">Sign In</a>
</li>
<li>
<a href="pages/examples/sign-up.html">Sign Up</a>
</li>
<li>
<a href="pages/examples/forgot-password.html">Forgot Password</a>
</li>
<li>
<a href="pages/examples/blank.html">Blank Page</a>
</li>
<li>
<a href="pages/examples/404.html">404 - Not Found</a>
</li>
<li>
<a href="pages/examples/500.html">500 - Server Error</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">map</i>
<span>Maps</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/maps/google.html">Google Map</a>
</li>
<li>
<a href="pages/maps/yandex.html">YandexMap</a>
</li>
<li>
<a href="pages/maps/jvectormap.html">jVectorMap</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">trending_down</i>
<span>Multi Level Menu</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span>Menu Item - 2</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Level - 2</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Level - 3</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Level - 4</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="pages/changelogs.html">
<i class="material-icons">update</i>
<span>Changelogs</span>
</a>
</li>
<li class="header">LABELS</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-red">donut_large</i>
<span>Important</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-amber">donut_large</i>
<span>Warning</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-light-blue">donut_large</i>
<span>Information</span>
</a>
</li>
</ul>
</div>
<!-- #Menu -->
<!-- Footer -->
<div class="legal">
<div class="copyright">
© 2016 <a href="javascript:void(0);">AdminBSB - Material Design</a>.
</div>
<div class="version">
<b>Version: </b> 1.0.4
</div>
</div>
<!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<aside id="rightsidebar" class="right-sidebar">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
<li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
<ul class="demo-choose-skin">
<li data-theme="red" class="active">
<div class="red"></div>
<span>Red</span>
</li>
<li data-theme="pink">
<div class="pink"></div>
<span>Pink</span>
</li>
<li data-theme="purple">
<div class="purple"></div>
<span>Purple</span>
</li>
<li data-theme="deep-purple">
<div class="deep-purple"></div>
<span>Deep Purple</span>
</li>
<li data-theme="indigo">
<div class="indigo"></div>
<span>Indigo</span>
</li>
<li data-theme="blue">
<div class="blue"></div>
<span>Blue</span>
</li>
<li data-theme="light-blue">
<div class="light-blue"></div>
<span>Light Blue</span>
</li>
<li data-theme="cyan">
<div class="cyan"></div>
<span>Cyan</span>
</li>
<li data-theme="teal">
<div class="teal"></div>
<span>Teal</span>
</li>
<li data-theme="green">
<div class="green"></div>
<span>Green</span>
</li>
<li data-theme="light-green">
<div class="light-green"></div>
<span>Light Green</span>
</li>
<li data-theme="lime">
<div class="lime"></div>
<span>Lime</span>
</li>
<li data-theme="yellow">
<div class="yellow"></div>
<span>Yellow</span>
</li>
<li data-theme="amber">
<div class="amber"></div>
<span>Amber</span>
</li>
<li data-theme="orange">
<div class="orange"></div>
<span>Orange</span>
</li>
<li data-theme="deep-orange">
<div class="deep-orange"></div>
<span>Deep Orange</span>
</li>
<li data-theme="brown">
<div class="brown"></div>
<span>Brown</span>
</li>
<li data-theme="grey">
<div class="grey"></div>
<span>Grey</span>
</li>
<li data-theme="blue-grey">
<div class="blue-grey"></div>
<span>Blue Grey</span>
</li>
<li data-theme="black">
<div class="black"></div>
<span>Black</span>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" 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>SYSTEM SETTINGS</p>
<ul class="setting-list">
<li>
<span>Notifications</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
<li>
<span>Auto Updates</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
</ul>
<p>ACCOUNT SETTINGS</p>
<ul class="setting-list">
<li>
<span>Offline</span>
<div class="switch">
<label><input type="checkbox"><span class="lever"></span></label>
</div>
</li>
<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>
Now again, edit the app.component.html and add the following code.
<!-- app.component.html --> <app-sidebar></app-sidebar>
After an automatic refresh of the page, you will see this kind of webpage.
Step: 14
The last part content is remaining, which we have also generated the components, now integrate with this admin panel.
<!-- content.component.html -->
<section class="content">
<div class="container-fluid">
<div class="jumbotron">
Integrate Admin template in Angular
</div>
</div>
</section>
Now finally, add the component to the app.component.html.
<!-- app.component.html --> <app-content></app-content>
So our final app.component.html file will look like this.
<!-- app.component.html --> <app-navbar></app-navbar> <app-sidebar></app-sidebar> <app-content></app-content>
After refreshing the page, our final output for our home page will look like this.
Finally, today’s task Integrate admin template in Angular application is complete.
Right now, I have just integrated the home page, but you can also link any of the pages via angular routing, which we will see in the next tutorial.
Github Link of Code
If you have any doubt regarding this tutorial, ask in a comment below, I am happy to help you out.
Hi Krunal!
I am beginner at angular js. I need guidance about which technology i should learn first type script or ES6 before jumping in angular js. Thanks!
Definitely, go with typescript. It is by default language of angular 2 or 4.
The title is a bit misleading since AngularJS generally refers to version 1.
Yes but now and the future, It will always remember as Angular 4 as an AngularJS. But thanks for the suggestion.
hi krunal, that is good tutorial for me. I want to ask you a question. How about, when we want to have another page like login page and backend page which have different css and js? How to implement it in angular 4? thank you.
hi, Krunal,
Great work and you put a great effort. it helps me a lot.
Thanks
its superb,thanks alot…….
Hi Krunal ,
Great work and you put a great effort
I want to ask you a question , i have added login page , after login it will go to dahsboard
the sidebar is not working
Hey can I use this technique to integrate some online website template that I found online or is it just for the admin?
Also am I supposed to install any plug ins? I’m using Webstorm and I get a TSLint Error saying “Could not find custom rule directory: C:\…\node_modules\codelyzer”. Was I supposed to install codelyzer?
I do not know other templating structure, but this is the standard way to do it, plugins are totally different things. You need to read the docs for that plugin. If the admin package is the third party then you need to read the full documentation of it. Otherwise, it will not work. If your admin panel is powered only bootstrap css framework then and then go for this technique.
Really Nice tutorial and very useful. On the side bar you are showing the icon and title, how to have only icon i.e., to expand the main content area and reduce the side bar to display only icon using accordion.
Hey krunal i am new in Angular 5 and i need to integrate ClientDashBoard, Admin Dashboard, ExtraDashboard with Different themes Each How can i achieve it,
Thanks in advance
It’s nice .. Could you please explain and give some sample to maintain Admin and client template on same application in angular4/6 ?
it was very helpful….
appreciate your efforts to understand us in detail manner..
thank you sir
Hello Krunal,
I like your article it’s really help full. But, I have a situation.
I have about us and contact us setup. I created controllers and everything is set according to your article. Now who can we load aboutus content when I click on about navigation
Hope you understand.
Thanks
Sudhirk
Hi Krunal,
I like this article very much, Looks great I enjoyed, My doubt is shall I add admin template for Angular 7 with the same procedure? above mentioned steps?
Please let me know. Thanks in advance …!!!!
Thanks for this tutorial. Theme is working well but javascript for datepicker, notifications, charts and other modules related to javascripts are not working. Could you please suggest me how can i use javascript in ts file for datepicker, notifications, charts and other modules. Thanks a lot. Look forward to hear you.
Hey! I saw this tutorial was updated 1 year ago. Do you have the version of this tutorial with AngularJS? It would help me a lot!!!
Finally, our today’s task Integrate admin template in Angular 4 application is complete. Right now I have just integrated the home page, but you can also link any of the pages via angular routing, which we will see in the next tutorial.
provide me a link for next tutorial.
Thank You
Sidebar is not working
No one is telling the answer why sidebar is not working? can anyone please?