How to Integrate AdminLTE theme to Angular Project

Apr 17, 2019
Web Development

Hire our expert Anuglar developer

How to Integrate Identity Server to Angular Application

We are using Angular 7 Quick starter, so first we need to download that Angular 7 CLI and then we need to create our project. Integrate AdminLTE theme in Angular 7 application is easy to get with. So let us dive in. Go to AngularCLI website and follow the steps.

Here consider that latest Node.js has already been installed.

Step 1: Install the Angular CLI

To install the CLI using npm, open a VS Code terminal/console window. If you are on a Mac or Linux type following command.

PS E:\>npm install -g @angular/cli

It takes some time to download the CLI and Installed the NPM packages.

Step 2: Create a workspace and initial application

Run the CLI command ng new and provide the name my-app, as show below. As we are integrateAdminLTE theme so I name as “adminLTE-app”
```
PS E:\> ng new adminLTE-app
```
The ng new command prompts you for information about features to include in the initial app project and here are the answer of each:
```
PS E:\> ng new adminLTE-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
CREATE adminLTE-app/angular.json (3958 bytes)
CREATE adminLTE-app/package.json (1313 bytes)
```
This will create required folders to Up and Running with our Application and also install all the NPM packages. This will also takes some time to complete.

Step 3: Serve the application

Go to workplace folder (adminLTE-app) and type following command on your terminal to serve the application.

PS E:\adminLTE-app>npm start
> admin-lte-app@0.0.0 start E:\adminLTE-app
> ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-04-17T06:05:02.020Z
Hash: 68fd5880430134b6562c
Time: 9104ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]
i｢wdm｣: Compiled successfully.

Once you run the application you can see below screen.

Step 4: Download Latest Release of Admin LTE

Visit the releases section on Github and download the latest release.

Download latest release

From the latest release need to download the SourceCode.zip file and extract that file.

Step 5: Add Admin LTE required file to Asset Folder

From the Admin LTE Code copy the “bower_components”, “dist” and “plugins” folder to assets folder.

Step 6: Import the Admin LTE javascript and css

Import the javascript and Css file from the asset folder to Index.html file as mention below

<!-- Bootstrap 3.3.7 -->
<linkrel="stylesheet" href="assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<linkrel="stylesheet" href="assets/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<linkrel="stylesheet" href="assets/bower_components/Ionicons/css/ionicons.min.css">
<!-- jvectormap -->
<linkrel="stylesheet" href="assets/bower_components/jvectormap/jquery-jvectormap.css">
<!-- Theme style -->
<linkrel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<linkrel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">

</head>
<body class="hold-transition skin-blue  layout-top-nav login-page">
<app-root>
<div class="wrapper"></div>
</app-root>
<script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<scriptsrc="assets/dist/js/adminlte.min.js"></script>
<!-- Sparkline -->
<script src="assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap  -->
<script src="assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll -->
<script src="assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS -->
<script src="assets/bower_components/chart.js/Chart.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<scriptsrc="assets/dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<scriptsrc="assets/dist/js/demo.js"></script>

After import run the application again and you can see the styles are apply.

Step 7: Add Components for Header

Run the following command in terminal / command line

PS E:\> ng g c appheader

Which Create the appheader component as below.

Now open the appheader.component.html and open the Index.HTML file for the download ADMIN LTE theme.

Copy all the HTML Content between <header><header> Including header tag into appfooter.component.html.

Now add appheader.component to app.component.html as mention below

<app-appheader></app-appheader>
<router-outlet></router-outlet>

Run the Application again and you can see the header is set as per below screen shot

Step 8: Add Components for Left Menu

Run the following command in terminal / command line

PS E:\adminLTE-app> ng g c appmenu
CREATE src/app/appmenu/appmenu.component.html (26 bytes)
CREATE src/app/appmenu/appmenu.component.spec.ts (635 bytes)
CREATE src/app/appmenu/appmenu.component.ts (274 bytes)
CREATE src/app/appmenu/appmenu.component.scss (0 bytes)
UPDATE src/app/app.module.ts (763 bytes)

Copy all the HTML Content between <aside></aside> Including aside tag into appmenu.component.html

Now add appmenu.component to app.component.html as mention below


<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>

After run the application you can see the output as below:

Step 9: Add Components for Footer

Run the following command in terminal / Command line

PS E:\adminLTE-app> ng g c appfooter
CREATE src/app/appfooter/appfooter.component.html (28 bytes)
CREATE src/app/appfooter/appfooter.component.spec.ts (649 bytes)
CREATE src/app/appfooter/appfooter.component.ts (282 bytes)
CREATE src/app/appfooter/appfooter.component.scss (0 bytes)
UPDATE src/app/app.module.ts (857 bytes)

Copy all the HTML Content between <footer></footer> Including aside tag into appfooter.component.html

Now add appfooter.component to app.component.html as mention below

<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>
<app-appfooter></app-appfooter>

Note: As we have not added any content part so footer is display on top.

Step 10: Add Components for Settings

Run the following command in terminal / Command line

PS E:\adminLTE-app> ng g c appsetting
CREATE src/app/appsetting/appsetting.component.html (29 bytes)
CREATE src/app/appsetting/appsetting.component.spec.ts (656 bytes)
CREATE src/app/appsetting/appsetting.component.ts (286 bytes)
CREATE src/app/appsetting/appsetting.component.scss (0 bytes)
UPDATE src/app/app.module.ts (955 bytes)

Copy all the HTML Content between <aside></aside> Including aside tag into appsetting.component.html. This html content you can find after footer html in admin LTE theme.

Now add appsetting.component to app.component.html as mention below


<app-appheader></app-appheader>
<app-appmenu></app-appmenu>
<router-outlet></router-outlet>
<app-appfooter></app-appfooter>
<app-appsetting></app-appsetting>

After you run the application you can see the setting menu is display

Step 11: Add Dashboard component

As now we have setup the Header, Footer, Menu, setting component now we can create dashboard component and add middle content from the theme.

Run the following command in terminal / Command line

PS E:\adminLTE-app> ng g c dashboard
CREATE src/app/dashboard/dashboard.component.html (28 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (282 bytes)
CREATE src/app/dashboard/dashboard.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1049 bytes)

Copy all the HTML Content of Content Wrapper. Contains page content into dashboard.component.html.

Here is all we set now Admin LTE Theme See below screen shot