Customize ABP Angular Application UI with AdminLTE.

Mon, 18 Apr 2022 19:10:23 Z

Customize ABP Angular Application UI with AdminLTE.

Introduction

In this article, I will demonstrate how to customzize the angular UI for your ABP application using the AdminLTE tempplate.

I shall be using some of tips and steps from ABP documentation. and this article. The above links don't show into detail how to completely replace the APB Angular UI without distorting the functionality of your app. I am going to take my time and demonstrate to you step by step.

At the end of this article you will come to realise that we have not removed or replaced any componet as the links above may suggest. We are only Literaly serving the AdminLTE UI on top of our angular UI.

Screenshots

Here, the pages of the final application.

Requirements

Download the latest release of Admin LTE. from this link.
Create a new ABP Project with Angular UI from here. or from the command line
Build and run the application to make sure everthing works.

Customizing the Angular UI

Step 1 - Setup

From the Admin LTE Code copy the dist and plugins folder to assets or node_modules folder of the angular project.

I will be using the assets folder

add this code to the angular.json file found in the root of the angular folder

"styles": [
  {
    "input": "src/assets/dist/css/adminlte.min.css",
    "inject": true,
    "bundleName": "adminlte.min"
  },
 "src/styles.scss"],
 "scripts": [
    "src/assets/plugins/jquery/jquery.min.js",
    "src/assets/plugins/bootstrap/js/bootstrap.bundle.min.js",
    "src/assets/dist/js/adminlte.min.js"
  ]

Step 2 - Add Header Components

Run the following command in angular folder to create a new component called AppHeaderComponent. We will use this to replace the default header

yarn ng generate component appheader

Open the appheader.component.ts file and paste the following lines of code.

part these lines of code are use to add the ABP Admin and Language nav items to the top nav ABP Replace NavItemsComponent.

import {
  AuthService,
  ConfigStateService,
  CurrentUserDto,
  LanguageInfo,
  NAVIGATE_TO_MANAGE_PROFILE,
  SessionStateService,
} from '@abp/ng.core';
import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
// import snq from 'snq';
// declare var snq: any;

@Component({
  selector: 'app-appheader',
  templateUrl: './appheader.component.html',
  styleUrls: ['./appheader.component.scss']
})
export class AppheaderComponent {
  currentUser$: Observable = this.configState.getOne$('currentUser');
  selectedTenant$ = this.sessionState.getTenant$();

  languages$: Observable = this.configState.getDeep$('localization.languages');

  get smallScreen(): boolean {
    return window.innerWidth < 992;
  }

  get defaultLanguage$(): Observable {
    return this.languages$.pipe(
      map(
        languages =>
          snq(
            () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName
          ),
        ''
      )
    );
  }

  get dropdownLanguages$(): Observable {
    return this.languages$.pipe(
      map(
        languages =>
          snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)),
        []
      )
    );
  }

  get selectedLangCulture(): string {
    return this.sessionState.getLanguage();
  }

  constructor(
    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
    private configState: ConfigStateService,
    private authService: AuthService,
    private sessionState: SessionStateService
  ) {}

  onChangeLang(cultureName: string) {
    this.sessionState.setLanguage(cultureName);
  }

  navigateToLogin() {
    this.authService.navigateToLogin();
  }

  logout() {
    this.authService.logout().subscribe();
  }
}

function snq(arg0: () => any): any {
}

Open the appheader.component.html file and paste the following lines of code. These lines add the Top Navigation Elements of the AdminLTE template to our UI

    
        
          
            
          
          
            Home
          
          
            Contact
          
        
    
        
          
            
              
              3
            
            
              
                
                  
                  
                    
                      Brad Diesel
                      
                    
                    Call me whenever you can...
                     4 Hours Ago
                  
                
              
              
              
                
                  
                  
                    
                      John Pierce
                      
                    
                    I got your message bro
                     4 Hours Ago
                  
                
              
              
              
                
                  
                  
                    
                      Nora Silvester
                      
                    
                    The subject goes here
                     4 Hours Ago
                  
                
              
              
              See All Messages
            
          
          
            
              
              15
            
            
              15 Notifications
              
              
                 4 new messages
                3 mins
              
              
              
                 8 friend requests
                12 hours
              
              
              
                 3 new reports
                2 days
              
              
              See All Notifications

And finally add these line of code to the tail or wherever you see fit inside the tag of the appheader.component.html file

these lines adds the Admin and language UI dropdows to the nav element


          
          
            
              
                {{ defaultLanguage$ | async }}
              
              
                {{ lang?.displayName }}
              
            
          
          
            
              {{
                'AbpAccount::Login' | abpLocalization
              }}
            
            
              
                {{ tenantName }}\
                {{ (currentUser$ | async)?.userName }}
              
              
                {{ 'AbpAccount::MyAccount' | abpLocalization }}
                {{ 'AbpUi::Logout' | abpLocalization }}

Step 3 - Add Left/Side Menu Components

Run the following command in angular folder to create a new component called AppMenuComponent. This will be our Side Menu

yarn ng generate component appmenu

Open the appmenu.component.ts file and paste the following lines of code.

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-appmenu',
  templateUrl: './appmenu.component.html',
  styleUrls: ['./appmenu.component.scss']
})
export class AppmenuComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    $('[data-widget="treeview"]').Treeview('init'); // inits the collapsibel menus
  }

}

Open the appmenu.component.html file and paste the following lines of code.


  
  
    
    AdminLTE 3
  

  
  
    
    
      
        
      
      
        Alexander Pierce
      
    

    
    
      
        
        
          
        
      
    

    
    
      
        
          
            
            
              {{ '::Menu:Home' | abpLocalization }}
            
          
        

        
        
          
            
            
              {{ 'AbpIdentity::Menu:IdentityManagement' | abpLocalization }}
              
            
          
          
            
              
                
                {{ 'AbpIdentity::Roles' | abpLocalization }}
              
            
            
              
                
                {{ 'AbpIdentity::Users' | abpLocalization }}
              
            
            
          
        
        
          
            
            
              {{ 'AbpTenantManagement::Menu:TenantManagement' | abpLocalization }}
              
            
          
          
            
              
                
                {{ 'AbpTenantManagement::Tenants' | abpLocalization }}
              
            
          
        
        
          
            
            
              Widgets
              New
            
          
        
        
          
            
            
              Layout Options
              
              6
            
          
          
            
              
                
                Top Navigation
              
            
            
              
                
                Top Navigation + Sidebar
              
            
            
              
                
                Boxed
              
            
            
              
                
                Fixed Sidebar
              
            
            
              
                
                Fixed Sidebar + Custom Area
              
            
            
              
                
                Fixed Navbar
              
            
            
              
                
                Fixed Footer
              
            
            
              
                
                Collapsed Sidebar
              
            
          
        
        
          
            
            
              Charts
              
            
          
          
            
              
                
                ChartJS
              
            
            
              
                
                Flot
              
            
            
              
                
                Inline
              
            
            
              
                
                uPlot
              
            
          
        
        
          
            
            
              UI Elements
              
            
          
          
            
              
                
                General
              
            
            
              
                
                Icons
              
            
            
              
                
                Buttons
              
            
            
              
                
                Sliders
              
            
            
              
                
                Modals & Alerts
              
            
            
              
                
                Navbar & Tabs
              
            
            
              
                
                Timeline
              
            
            
              
                
                Ribbons
              
            
          
        
        
          
            
            
              Forms
              
            
          
          
            
              
                
                General Elements
              
            
            
              
                
                Advanced Elements
              
            
            
              
                
                Editors
              
            
            
              
                
                Validation
              
            
          
        
        
          
            
            
              Tables
              
            
          
          
            
              
                
                Simple Tables
              
            
            
              
                
                DataTables
              
            
            
              
                
                jsGrid
              
            
          
        
        EXAMPLES
        
          
            
            
              Calendar
              2
            
          
        
        
          
            
            
              Gallery
            
          
        
        
          
            
            
              Kanban Board
            
          
        
        
          
            
            
              Mailbox
              
            
          
          
            
              
                
                Inbox
              
            
            
              
                
                Compose
              
            
            
              
                
                Read
              
            
          
        
        
          
            
            
              Pages
              
            
          
          
            
              
                
                Invoice
              
            
            
              
                
                Profile
              
            
            
              
                
                E-commerce
              
            
            
              
                
                Projects
              
            
            
              
                
                Project Add
              
            
            
              
                
                Project Edit
              
            
            
              
                
                Project Detail
              
            
            
              
                
                Contacts
              
            
            
              
                
                FAQ
              
            
            
              
                
                Contact us
              
            
          
        
        
          
            
            
              Extras
              
            
          
          
            
              
                
                
                  Login & Register v1
                  
                
              
              
                
                  
                    
                    Login v1
                  
                
                
                  
                    
                    Register v1
                  
                
                
                  
                    
                    Forgot Password v1
                  
                
                
                  
                    
                    Recover Password v1
                  
                
              
            
            
              
                
                
                  Login & Register v2
                  
                
              
              
                
                  
                    
                    Login v2
                  
                
                
                  
                    
                    Register v2
                  
                
                
                  
                    
                    Forgot Password v2
                  
                
                
                  
                    
                    Recover Password v2
                  
                
              
            
            
              
                
                Lockscreen
              
            
            
              
                
                Legacy User Menu
              
            
            
              
                
                Language Menu
              
            
            
              
                
                Error 404
              
            
            
              
                
                Error 500
              
            
            
              
                
                Pace
              
            
            
              
                
                Blank Page
              
            
            
              
                
                Starter Page
              
            
          
        
        
          
            
            
              Search
              
            
          
          
            
              
                
                Simple Search
              
            
            
              
                
                Enhanced
              
            
          
        
        MISCELLANEOUS
        
          
            
            Tabbed IFrame Plugin
          
        
        
          
            
            Documentation
          
        
        MULTI LEVEL EXAMPLE
        
          
            
            Level 1
          
        
        
          
            
            
              Level 1
              
            
          
          
            
              
                
                Level 2
              
            
            
              
                
                
                  Level 2
                  
                
              
              
                
                  
                    
                    Level 3
                  
                
                
                  
                    
                    Level 3
                  
                
                
                  
                    
                    Level 3
                  
                
              
            
            
              
                
                Level 2
              
            
          
        
        
          
            
            Level 1
          
        
        LABELS
        
          
            
            Important
          
        
        
          
            
            Warning
          
        
        
          
            
            Informational

Step 4 - Adding footer and appsettings

go through the same steps above to add footer and appsettings components and pasete the respective codes

yarn ng generate component appfooter


// appfooter.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-appfooter',
  templateUrl: './appfooter.component.html',
  styleUrls: ['./appfooter.component.scss']
})
export class AppfooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}




    Copyright © 2014-2021 AdminLTE.io.
    All rights reserved.
    
      Version 3.2.0

yarn ng generate component appsetting

// appsetting.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-appsetting',
  templateUrl: './appsetting.component.html',
  styleUrls: ['./appsetting.component.scss']
})
export class AppsettingComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Step 5 - Bringing it all together

Open the index.html in the root folder file and and modify as follows.





  
  
  CustomUIAdminLTE

Open the app.module.ts file.
Import the SharedModule to the imports array of AppModule


import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    //...
    SharedModule
  ]
)}

Open the app.component.ts file.
Replace the content with the following code:

import {
  ConfigStateService,
  CurrentUserDto,
} from '@abp/ng.core';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  currentUser$: Observable = this.configState.getOne$('currentUser');

  constructor(
    private configState: ConfigStateService,
  ) { }
}

Create and open the app.component.html file.
Replace the content with the following code:

Finally run and serve the application

Source Code

Source code of the completed application is available on GitHub.

ABP.IO Stories

Customize ABP Angular Application UI with AdminLTE.

Customize ABP Angular Application UI with AdminLTE.

Introduction

Screenshots

Requirements

Customizing the Angular UI

Step 1 - Setup

Step 2 - Add Header Components

Step 3 - Add Left/Side Menu Components

Step 4 - Adding footer and appsettings

Step 5 - Bringing it all together

Finally run and serve the application

Source Code