Angular 14 – Free Bootstrap Admin LTE 3 Template

Posted on by

Hello readers, in this post we will learn how to use the Angular admin template, Admin LTE 3, for free. You can start downloading the free AdminLTE 3 Bootstrap 5 template, while we work on setting up your computer.

Prerequisites

  • Angular 14
  • Node.js 14.15 or higher (The latest stable version is 16.16.0)
  • AdminLTE v3.2.0

Installing Angular 14

To install Angular 14 on your Windows system, you need to perform the following steps:

  1. Open the Command Prompt or Terminal of your choice. I used Visual Studio Code Terminal by opening VS Code and Clicking the View->Terminal menu.
  2. Run the below command. You need a stable Internet connection. In a few seconds, Angular 14 will be installed and display the number of packages added, removed, or updated.
 npm install -g @angular/cli
Installing latest Angular Version 14.1.0 Using Visual Studio Code Terminal
Installing Angular

Installing Node.JS 16.16.0

The easiest way to install Node.JS is to navigate to NodeJS’s official website and click the 16.16.0 LTS button. This will download the MSI file, which you can run by double-clicking it. You simply click Next with the default options selected until the installation completes.

Creating Angular Project with Admin LTE 3 Bootstrap Template

I trust that by now you have already downloaded the Admin LTE 3 bootstrap template from the link given at the beginning of this post. Now we have the latest version of Angular installed, so let’s start.

Creating New Angular 14 App

You can create a new Angular 14 by performing the following steps.

  1. Open Visual Studio Code, and then Open the Terminal by pressing Ctrl+` keys or by clicking the View->Terminal menu option.
  2. Navigate to the directory where you want to create a new Angular App in the VS Code Terminal by using the CD command. Example cd Angular14.
  3. Create a new Angular 14 application using the ng new AdminLTE3Demo command. You will be prompted with a couple of questions.
  4. Type y in answer to a question Would you like to add Angular routing?
  5. Ensure that the CSS option is selected when prompted with a question Which stylesheet format would you like to use? and press the Enter key. After a few seconds, the new Angular 14 app is created.
  6. Navigate to the AdminLTE3Demo folder from the terminal using the cd .\AdminLTE3Demo\ command.
  7. Run the ng serve command to ensure the newly created Angular app is working fine. If everything is working fine, you will see ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** message, as shown in the following screenshot.
Running Angular 14 App in Visual Studio Code
Running Angular 14 App
  1. Open a web browser of your choice and navigate to the http://localhost:4200/ URL. An Angular 14 website render, as shown in the following screenshot.
Angular 14 Default Project Output
Angular 14 Default Project Output

Integrating Admin LTE 3 into Angular Application

Admin LTE 3 is a free Bootstrap template that consists of various sections, such as Header, Sidebars, Footers, etc. In this section, we will set up all those. So let’s start.

The very first step is to unzip the Admin LTE 3 file you downloaded from the official AdminLTE website. Then perform the following steps:

  1. Open the folder where you have extracted the Admin LTE 3 template.
  2. Copy the dist and plugins folder.
  3. Navigate to your Angular Project directory, in our case it is D:\Angular14\AdminLTE3Demo\ from Windows Explorer.
  4. Navigate to src\assets and paste the copied dist and plugins folder there.
  5. Open the index.html file from the folder where you have extracted the Admin LTE 3 template in Notepad.
  6. Open the index.html file of your Angular app (in the src directory) in Visual Studio Code.
  7. Copy the CSS imports from the HEAD section of the index.html file of Admin LTE to the HEAD section of the index.html file of your Angular app. These are basically the link tags within the HEAD section.
  8. Copy the class attribute of the body element from the index.html from the Admin LTE to the body element of the index.html file of your Angular App.
  9. Copy the JS imports from the index.html from the Admin LTE to the index.html file of your Angular App just before the closing of the body tag. The final index.html file of your Angular App should similar to the below code.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AdminLTE3Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
  <app-root></app-root>
  <!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
</body>
</html>

Fix broken links

Since we have moved the dist and plugins folder to src/assets folder of our Angular project, we need to update all the references. To fix the broken links, you need to perform the following steps:

  1. Open the index.html file in the Visual Studi Code of your Angular Project.
  2. Press the Ctrl + H keys to open the Find and Replace dialog.
  3. In the Find text box, type “plugins/ .
  4. In the Replace text box type “assets/plugins/ .
  5. Press Ctrl + Alt + Enter keys to replace all. This will update the path to the correct location.
  6. Type “dist/ in the Find text box.
  7. Type “assets/dist/ in the Replace text box.
  8. Press Ctrl + Alt + Enter keys to replace all. However, we are working in Angular and everything should be component based. So let’s break website sections into components.

Create Angular 14 Components

The Admin LTE 3 template is divided into five sections. These sections are:

  • Navbar – main-header CSS class
  • Main Sidebar – main-sidebar CSS class
  • Content Wrapper – content-wrapper CSS class
  • Footer – main-footer CSS class
  • Control Sidebar – control-sidebar CSS class

Therefore, we need to create these five components in Angular. For easy understanding, let’s create components using the same names.

You can use the ng generate component command to generate all these components. For example:

ng generate component main-header
ng generate component main-sidebar
ng generate component content-wrapper
ng generate component main-footer    
ng generate component control-sidebar

Now that we have created Admin LTE 3 components, it is time to move the HTML code from the index.html file to its relevant components.

main-header

  1. Open the index.html file of your Admin LTE template, and search for main-header text.
  2. Copy the nav tag block and select all and paste it into the main-header component HTML, main-header.component.html, file.
  3. Press the Ctrl + H keys to open the Find and Replace dialog in the main-header.component.html, file.
  4. Type “dist/ in the Find text box.
  5. Type “assets/dist/ in the Replace text box.
  6. Press Ctrl + Alt + Enter keys to replace all.

main-sidebar

  1. Open the index.html file of your Admin LTE template, and search for main-sidebar text.
  2. Copy the aside tag block and select all and paste it into the main-sidebar component HTML, main-sidebar.component.html, file.
  3. Press the Ctrl + H keys to open the Find and Replace dialog in the main-sidebar.component.html, file.
  4. Type “dist/ in the Find text box.
  5. Type “assets/dist/ in the Replace text box.
  6. Press Ctrl + Alt + Enter keys to replace all.

content-wrapper

  1. Open the index.html file of your Admin LTE template, and search for content-wrapper text.
  2. Copy the div tag block and select all and paste it into the content-wrapper component HTML, content-wrapper.component.html, file.
  3. Press the Ctrl + H keys to open the Find and Replace dialog in the content-wrapper.component.html, file.
  4. Type “dist/ in the Find text box.
  5. Type “assets/dist/ in the Replace text box.
  6. Press Ctrl + Alt + Enter keys to replace all.

main-footer

  1. Open the index.html file of your Admin LTE template, and search for main-footer text.
  2. Copy the footer tag block and select all and paste it into the main-footer component HTML, main-footer.component.html, file.

control-sidebar

  1. Open the index.html file of your Admin LTE template, and search for control-sidebar text.
  2. Copy the aside tag block and select all and paste it into the control-sidebar component HTML, control-sidebar.component.html, file.

Now, we need to add our component’s references, so that Angular will load all of those fancy stuffs.

Adding Components

To add the newly created components, you need to perform the following steps:

  1. Open the app.component.html file.
  2. Remove all code present in the app.component.html file.
  3. Add the following code in the app.component.html file.
<app-main-header></app-main-header>
<app-main-sidebar></app-main-sidebar>
<app-content-wrapper></app-content-wrapper>
<app-control-sidebar></app-control-sidebar>
<app-main-footer></app-main-footer>
<router-outlet></router-outlet>

Now you are almost ready. However, there is one last thing that you can optionally do, is to comment the <script src=”assets/dist/js/demo.js”></script> in the index.html file of your Angular App project. Below is the screenshot of the final output.

Angular Project Output with Admin LTE 3 Bootstrap Template
Angular Project Output with Admin LTE 3 Bootstrap Template

You can also download the Angular Admin LTE 3 Demo project from my Github Repository.

Why do we need a template?

A website template consists of pre-styled elements, such as Header, Sidebar, Footers, etc. These pre-styled elements collectively build or help build a website with less or zero effort. Most of the templates are customizable or if you have an understanding of HTML, CSS, BootStrap, and JS, you can customize the template on your own.

A template helps to build the base structure with various styles and a user can focus more on the contents instead of designing everything from scratch.

Most of the website templates are based on Bootstrap or similar toolkits to make the website responsive to any screen size or layout. Digiprove sealCopyright secured by Poora Gyaan

Share and Like