Post
Ask Question

Implementing Most Popular AdminLTE Bootstrap Dashboard In Angular 11

 
When we start the development of any application, the first thing is implementing a theme for the solution. As per current industry trends,  developers try to use one of the available popular themes or frameworks. AdminLTE is one of the most popular and open source themes specifically for admin dashboard, however we can use this theme for several other types of applications.
 
In this article, we will learn how to implement one of the most popular AdminLTE admin themes in an Angular application. Our final outcome of this article will be an admin dashboard or theme with free AdminLTE bootstrap Admin dashboard as shown below. (note: this is based on the attached sample code).
 
 
Here, I will be using Angular 11 and Visual Studio code, however, the steps will be the same for another version as well and you can use Visual Studio for better experiences.
 
AdminLTE Bootstrap Admin Dashboard Template
 
The best open source admin dashboard & control panel theme, and built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components.
 
This template is one of the most popular admin/dashboard themes and is used most of the applications in today's industries.
 
More details or demo: https://adminlte.io/
 
 
Create a folder where you want to create the application. Then open the command window (cmd) and navigate to the same folder. Or, simply type cmd in file location from the folder as shown.
 
 
Simply replace the address bar with cmd command.
 
Firstly, I would suggest to check version of angular (cli) v with the  following command.
 
ng version
 
 
If the angular cli version is below 11, then you can update using the below command. 
 
npn install -g @angular/cli
 
Let us begin with creating a new Angular application. Create a new application with the command:
 
ng new applicationname
 
 
 
There are some options as highlighted in the above sample.
 
Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
 
This setting helps improve maintainability and catch bugs ahead of time.
 
For more information, see https://angular.io/strict?
 
- Type Yes
 
Would you like to add Angular routing?
 
- Type Yes
 
Which stylesheet format would you like to use?
 
- Choose SCSS [ https://sass-lang.com/documentation/syntax#scss
 
Change the location to application folder with command.
 
cd applicationname
 
Now run and open the application with the command as shown.
 
ng serve –open
 
 
Output
 
 
 
Congrats, our application runs normally. By default, Angular application opens with 4200 port, however you can change it by updating in angular.json file or using command ng serve --port 3000.
 
Next, we will implement Admin LTE in the current Angular application.
 
Download the latest theme from link : https://github.com/ColorlibHQ/AdminLTE
 
You will see the downloaded folder as illustrated.
 
 
I would recommend starting with  minimal page design, this form >> General page which looks like as below.
 
Note
Why choose general.html?
 
Because index or dashboard pages of AdminLTE contains several complex and exclusive items like charts, bar diagrams, tables, maps which requires different js and css file plugins. Additionally, those elements are not required to include in the application, however, we can include based on requirements on an ad-hoc basis. General.html page contains minimal js and css files which are generally required in most of the applications.
 
For this article, I will not include all the features or pages but only general.html. I will remove all the form samples and keep the page simple. 
 
We will add all the related CSS, JS and images into asset folder of our application which we created earlier as shown.
 
 
To identify the related css, js and images, we will see the general.html page of AdminLte downloaded one.
 
Copy only the below css, js and all images. 
 
Head Section
  1. <!-- Google Font: Source Sans Pro -->    
  2. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">    
  3. <!-- Font Awesome -->    
  4. <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">    
  5. <!-- Theme style -->    
  6. <link rel="stylesheet" href="/assets/adminlte/dist/css/adminlte.min.css">    
  7. <link href="/assets/custom/css/application.css" rel="stylesheet" />     
Add below js file.
  1. <!-- jQuery -->    
  2.   <script src="/assets/plugins/jquery/jquery.min.js"></script>    
  3.   <!-- Bootstrap 4 -->    
  4.   <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>    
  5.   <!-- bs-custom-file-input -->    
  6.   <script src="/assets/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>    
  7.   <!-- AdminLTE App -->    
  8.   <script src="/assets/adminlte/dist/js/adminlte.min.js"></script>    
  9.   <!-- AdminLTE for demo purposes -->    
  10.   <script src="/assets/adminlte/dist/js/demo.js"></script>     
Assets folder will be as shown.
 
 
For the minimal theme, copy only these files and folders from downloaded AdminLte.
 
Replace with the below html in your Angular index page.
 
Complete index page.
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="utf-8">    
  5.   <title>User SelfDesk</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.   <!-- Google Font: Source Sans Pro -->    
  10.   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">    
  11.   <!-- Font Awesome -->    
  12.   <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">    
  13.   <!-- Theme style -->    
  14.   <link rel="stylesheet" href="/assets/adminlte/dist/css/adminlte.min.css">    
  15.   <link href="/assets/custom/css/application.css" rel="stylesheet" />    
  16. </head>    
  17. <body class="hold-transition sidebar-mini">    
  18.   <app-root></app-root>    
  19.     
  20.   <!-- jQuery -->    
  21.   <script src="/assets/plugins/jquery/jquery.min.js"></script>    
  22.   <!-- Bootstrap 4 -->    
  23.   <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>    
  24.   <!-- bs-custom-file-input -->    
  25.   <script src="/assets/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>    
  26.   <!-- AdminLTE App -->    
  27.   <script src="/assets/adminlte/dist/js/adminlte.min.js"></script>    
  28.   <!-- AdminLTE for demo purposes -->    
  29.   <script src="/assets/adminlte/dist/js/demo.js"></script>    
  30. </body>    
  31. </html>     
We will create separate component for top nav, side nav and footer.
 
ng g component -skipTests /mastertheme/topnav
ng g component -skipTests /mastertheme/asidenav
ng g component -skipTests /mastertheme/footer
  1. ng g component -skipTests /mastertheme/topnav  
  2. ng g component -skipTests /mastertheme/asidenav  
  3. ng g component -skipTests /mastertheme/footer  
Copy the marked html elements into respective component based on commented section of general.html file.
 
 
Copy the navbar contents part into topnav.component.html page, main sidebar contents into aside.component.html page and footer contents into footer.component.html. Our angular application folder structure will be as given below.
 
 
 
The application folder will look like as shown above at this point. Furthermore, replace code of app.component.html with below.
  1. <div class="wrapper">    
  2.   <app-topnav></app-topnav>    
  3.   <app-asidenav></app-asidenav>    
  4.   <div class="content-wrapper">    
  5.     
  6.     <router-outlet></router-outlet> <!-- This will be changing based on routing  -->  
  7.     
  8.   </div>    
  9.   <app-footer></app-footer>    
  10. </div>     
We are creating reusable components of top nav, side bar and footer. Therefore, we only will add page contents and top nav, side bar and footer will be common like master page.
 
Again, create home component for home or landing page.
 
ng g component -skipTests /home
 
Add the home.component.html with below, 
  1. <!-- Content Header (Page header) -->    
  2. <section class="content-header">    
  3.   <div class="container-fluid">    
  4.     <div class="row mb-2">    
  5.       <div class="col-sm-6">    
  6.         <h1>General Form</h1>    
  7.       </div>    
  8.       <div class="col-sm-6">    
  9.         <ol class="breadcrumb float-sm-right">    
  10.           <li class="breadcrumb-item"><a href="#">Home</a></li>    
  11.           <li class="breadcrumb-item active">General Form</li>    
  12.         </ol>    
  13.       </div>    
  14.     </div>    
  15.   </div><!-- /.container-fluid -->    
  16. </section>    
Here, we are removing all the forms related elements, other contents and keep only title of the page according to theme. Next step is to add routing for home page, therefore update routing in app-routing.module.ts file with below code,
  1. const routes: Routes = [  
  2.   { path: '', component: HomeComponent, pathMatch: 'full' },  
  3. ];  
Now we have implemented the adminLte theme in our angular application.
 
So, we will run and open the application with the command as shown.
 
ng serve –open
 
Final output
 
 
Finally, we have implemented AdminLTE bootstrap admin dashboard template.
 

Conclusion

 
This article has portrayed the necessary steps to implement one of the most popular themes, AdminLTE, in Angular applications. Likewise, we can implement admin Lte bootstrap admin dashboard in Angular 11 application and the same steps will be applied for other versions as well. I would recommend starting with minimal pages like general or blank pages and  subsequently, add the components based on requirements. 


Similar Articles