How to Integrate Admin LTE With Angular

In this tutorial, you will learn Method 2 of how to integrate the AdminLTE template with Angular application. In Method 1 we did the integration by installing the admin-lte package. But in this method, we would simply copy the files across. This method is more flexible  and easier to follow.

  1. Setup and Test a New Angular Application
  2. Copy the CSS and JS Links Across
  3. Create and add the Components
  4. Fix the broken Images Link

 

1. Setup and Test a New Angular Application

Step 1 – Download the Admin LTE template version 3.2.0 from here and unzip into a local folder.

Step 2 – Create a new Angular application using the command ng new <app-name>

Step 3 – Now you can serve the application using ng server –open to make sure it works

Step 4 – Open the Admin LTE folder you downloaded. Copy the dist and the plugins folders. Go to your Angular application and paste them inside the src/assets folder.

Step 5 – Open the index2.html page from the AdminLTE template folder. Open it with VS Code.

Step 6 – Also open the index.html page from your Angular application.

 

2. Copy the CSS and JS Links Across

Step 1 – Copy the css imports links from the head section of the index2.html page to the head section of the index.html page of your Angular app.

Step 2 – For each of the links, prefix the url with assets/ so that it points to the right location.

Step 3 – Copy the <body> tag styles across to the <body> tag of the index page.

Step 4 – Copy the js imports to the index.html to location just before the closing </body> tag. Also add the assets/ prefix

 

3. Create and Add the Components

Now we need to create all components based on the template. We will be adding these components to the app.component.html file. But first you need to know which components to create.

Step 1 – Open the app.component.html file and delete all the content except the <router-outlet></router-outlet> section.

Step 2 – Now you can take a careful look at the index2.html file and you will notice that there are 5 different section (not including preloader). These sections are:

  • main-header – this is the <nav> </nav> tag
  • main-sidebar – this is the <aside></aside> tag
  • content-wrapper – this is a <div> tag with class=”content-wrapper”
  • control-sidebar – this is <aside></aside> tag with class=”control-sidebar”
  • main-footer – this is the <footer></footer> tag with class=”main-footer”

Step 3 – You now need to create these 5 components with corresponding names using the command below:

ng generate component <component-name>

 

Step 4 – After create all the five components, copy the content of each section from the index2.html across to the corresponding component.

Step 5 – Finally, add all the components to app.component.html file just above the <router-outlet></router-outlet> section.

At this point, the content of your app.component.html would be as shown below:

<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 can fire up the application using ng serve command.

 

4. Fix the Broken Image Links

When the application runs, you will notice that the images are not showing. Let’s fix it now.

Step 1 – For each of the components, locate the <img></img> tags. Add the assets/ prefix to the src attributes so they point to the right folder inside the assets folder.

You can use find and replace to replace all occurrence of dist/img with assets/dist/img. This is shown below:

point the images to the right location
point the images to the right location

 

At this point, you can run the application and see that everything works perfectly well 🙂

kindsonthegenius

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published.