{"id":1999,"date":"2022-02-26T12:00:00","date_gmt":"2022-02-26T11:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/how-to-integrate-admin-lte-with-angular\/"},"modified":"2026-07-05T03:26:31","modified_gmt":"2026-07-05T01:26:31","slug":"how-to-integrate-admin-lte-with-angular","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-integrate-admin-lte-with-angular\/","title":{"rendered":"How to Integrate Admin LTE With Angular"},"content":{"rendered":"

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

    \n
  1. Setup and Test a New Angular Application<\/a><\/li>\n
  2. Copy the CSS and JS Links Across<\/a><\/li>\n
  3. Create and add the Components<\/a><\/li>\n
  4. Fix the broken Images Link<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Setup and Test a New Angular Application<\/strong><\/h4>\n

    Step 1<\/strong> – Download the Admin LTE template version 3.2.0 from here<\/a> and unzip into a local folder.<\/p>\n

    Step 2<\/strong> – Create a new Angular application using the command ng new <app-name><\/strong><\/p>\n

    Step 3<\/strong> – Now you can serve the application using ng server –open<\/strong> to make sure it works<\/p>\n

    Step 4<\/strong> – Open the Admin LTE folder you downloaded. Copy the dist<\/strong><\/em> and the plugins<\/strong><\/em> folders. Go to your Angular application and paste them inside the src\/<\/strong>assets<\/strong><\/em> folder.<\/p>\n

    Step 5<\/strong> – Open the index2.html<\/em><\/strong> page from the AdminLTE template folder. Open it with VS Code.<\/p>\n

    Step 6<\/strong> – Also open the index.html<\/em><\/strong> page from your Angular application.<\/p>\n

     <\/p>\n

    2. Copy the CSS and JS Links Across<\/strong><\/h4>\n

    Step 1<\/strong>\u00a0– 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.<\/p>\n

    Step 2<\/strong>\u00a0– For each of the links, prefix the url with assets\/<\/strong><\/em> so that it points to the right location.<\/p>\n

    Step 3<\/strong>\u00a0– Copy the <body><\/strong> tag styles across to the <body><\/strong> tag of the index page.<\/p>\n

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

     <\/p>\n

    3. Create and Add the Components<\/strong><\/h4>\n

    Now we need to create all components based on the template. We will be adding these components to the app.component.html file<\/strong>. But first you need to know which components to create.<\/p>\n

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

    Step 2<\/strong> – 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:<\/p>\n