Hii, Angular Folks, We will discuss today How to integrate admin template in 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 which is very fast for building Single Page Application.

Single Page Application(SPA) is a kind of 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 through which we can send the network request to the servers. It gets the response in JSON and easily handled by Angular’s components.

Angular is fully based on TypeScript language created by Microsoft. If you want to know more about TypeScript language then check out my another 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 admin template in Angular application is easy to get with. So let us dive in.

You can upgrade your Angular CLI or you can install 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 following command

npm install -g @angular/cli

If you are on a Mac or Linux type 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 also 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 also.

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; it is 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 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 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. That particular component will use that particular HTML and CSS. 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

Now we need to define our components, like if we want to build an admin template then first we need to divide our HTML Material template into Navbar, Sidebar and Content area. 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 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. 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 automatic refresh the page, you will see this kind of webpage.

Step: 14

Last part content is remaining, which we have also generated the components, now just 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.

If you have any doubt regarding this tutorial ask in a comment below, I am happy to help you out.