Blog

You are here: Blog / Integrate AdminLTE theme to Angular Project

  • How to Integrate AdminLTE theme to Angular Project

    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

    1. 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

    2. 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