{"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-08-28T14:47:27","modified_gmt":"2026-08-28T12:47:27","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":"\n<p class=\"wp-block-paragraph\"><em>Learn how to integrate Admin LTE with Angular by copying the template files, adding CSS and JS links, creating components, and fixing image links.<\/em><\/p>\n\n\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p>Download the Admin LTE template and create a new Angular application.<\/p>\n<\/li>\n<li>\n<p>Copy the Admin LTE <code>dist<\/code> and <code>plugins<\/code> folders into the Angular <code>assets<\/code> folder.<\/p>\n<\/li>\n<li>\n<p>Add the Admin LTE CSS and JavaScript files to the Angular <code>index.html<\/code>.<\/p>\n<\/li>\n<li>\n<p>Create Angular components for the main header, sidebar, content wrapper, control sidebar, and footer.<\/p>\n<\/li>\n<li>\n<p>Update image paths with the <code>assets\/<\/code> prefix so Admin LTE images display correctly.<\/p>\n<\/li>\n<\/ul>\n<p>In this tutorial, you will learn Method 2 of how to integrate the AdminLTE template with Angular application. In <a href=\"https:\/\/kindsonthegenius.com\/blog\/fleetmsv3-part-1-setup-angular-node-postgresql-and-angular-template\/\" target=\"_blank\" rel=\"noopener\">Method 1<\/a> we did the integration by installing the <em><strong>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<ol>\n<li><a href=\"#t1\">Setup and Test a New Angular Application<\/a><\/li>\n<li><a href=\"#t2\">Copy the CSS and JS Links Across<\/a><\/li>\n<li><a href=\"#t3\">Create and add the Components<\/a><\/li>\n<li><a href=\"#t4\">Fix the broken Images Link<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Setup and Test a New Angular Application<\/strong><\/h4>\n<p><strong>Step 1<\/strong> \u2013 Download the Admin LTE template<a href=\"https:\/\/github.com\/ColorlibHQ\/AdminLTE\/archive\/refs\/heads\/master.zip\" target=\"_blank\" rel=\"noopener\"> version 3.2.0 from here<\/a> and unzip into a local folder.<\/p>\n<p><strong>Step 2<\/strong> \u2013 Create a new Angular application using the command<strong> ng new &lt;app-name&gt;<\/strong><\/p>\n<p><strong>Step 3<\/strong> \u2013 Now you can serve the application using <strong>ng server \u2013open<\/strong> to make sure it works<\/p>\n<p><strong>Step 4<\/strong> \u2013 Open the Admin LTE folder you downloaded. Copy the <em><strong>dist<\/strong><\/em> and the <em><strong>plugins<\/strong><\/em> folders. Go to your Angular application and paste them inside the <strong>src\/<\/strong><em><strong>assets<\/strong><\/em> folder.<\/p>\n<p><strong>Step 5<\/strong> \u2013 Open the <strong><em>index2.html<\/em><\/strong> page from the AdminLTE template folder. Open it with VS Code.<\/p>\n<p><strong>Step 6<\/strong> \u2013 Also open the <strong><em>index.html<\/em><\/strong> page from your Angular application.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Copy the CSS and JS Links Across<\/strong><\/h4>\n<p><strong>Step 1<\/strong>\u00a0\u2013 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<p><strong>Step 2<\/strong>\u00a0\u2013 For each of the links, prefix the url with <em><strong>assets\/<\/strong><\/em> so that it points to the right location.<\/p>\n<p><strong>Step 3<\/strong>\u00a0\u2013 Copy the <strong>&lt;body&gt;<\/strong> tag styles across to the <strong>&lt;body&gt;<\/strong> tag of the index page.<\/p>\n<p><strong>Step 4<\/strong>\u00a0\u2013 Copy the js imports to the index.html to location just before the closing <strong>&lt;\/body&gt;<\/strong> tag. Also add the <strong><em>assets\/<\/em><\/strong> prefix<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Create and Add the Components<\/strong><\/h4>\n<p>Now we need to create all components based on the template. We will be adding these components to the <strong>app.component.html file<\/strong>. But first you need to know which components to create.<\/p>\n<p><strong>Step 1<\/strong> \u2013 Open the <em><strong>app.component.html<\/strong><\/em> file and delete all the content except the <strong><em>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/em><\/strong> section.<\/p>\n<p><strong>Step 2<\/strong> \u2013 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<ul>\n<li><strong>main-header<\/strong> \u2013 this is the &lt;nav&gt; &lt;\/nav&gt; tag<\/li>\n<li><strong>main-sidebar<\/strong> \u2013 this is the &lt;aside&gt;&lt;\/aside&gt; tag<\/li>\n<li><strong>content-wrapper<\/strong> \u2013 this is a &lt;div&gt; tag with class=\u201dcontent-wrapper\u201d<\/li>\n<li><strong>control-sidebar<\/strong> \u2013 this is &lt;aside&gt;&lt;\/aside&gt; tag with class=\u201dcontrol-sidebar\u201d<\/li>\n<li><strong>main-footer<\/strong> \u2013 this is the &lt;footer&gt;&lt;\/footer&gt; tag with class=\u201dmain-footer\u201d<\/li>\n<\/ul>\n<p><strong>Step 3<\/strong> \u2013 You now need to create these 5 components with corresponding names using the command below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">ng generate component <span style=\"color: #007700;\">&lt;component-name&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 4<\/strong> \u2013 After create all the five components, copy the content of each section from the <em><strong>index2.html<\/strong><\/em> across to the corresponding component.<\/p>\n<p><strong>Step 5<\/strong> \u2013 Finally, add all the components to app.component.html file just above the <strong><em>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/em><\/strong> section.<\/p>\n<p>At this point, the content of your app.component.html would be as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;app-main-header&gt;&lt;\/app-main-header&gt;<\/span>\n<span style=\"color: #007700;\">&lt;app-main-sidebar&gt;&lt;\/app-main-sidebar&gt;<\/span>\n<span style=\"color: #007700;\">&lt;app-content-wrapper&gt;&lt;\/app-content-wrapper&gt;<\/span>\n<span style=\"color: #007700;\">&lt;app-control-sidebar&gt;&lt;\/app-control-sidebar&gt;<\/span>\n<span style=\"color: #007700;\">&lt;app-main-footer&gt;&lt;\/app-main-footer&gt;<\/span>\n<span style=\"color: #007700;\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/span>\n<\/pre>\n<p>Now you can fire up the application using <strong>ng serve<\/strong> command.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Fix the Broken Image Links<\/strong><\/h4>\n<p>When the application runs, you will notice that the images are not showing. Let\u2019s fix it now.<\/p>\n<p><strong>Step 1<\/strong> \u2013 For each of the components, locate the <strong>&lt;img&gt;&lt;\/img&gt;<\/strong> tags. Add the <strong>assets\/<\/strong> prefix to the <strong>src<\/strong> attributes so they point to the right folder inside the assets folder.<\/p>\n<p>You can use find and replace to replace all occurrence of <em><strong>dist\/img<\/strong><\/em> with <strong><em>assets\/dist\/img.<\/em><\/strong> This is shown below:<\/p>\n<figure id=\"attachment_14844\" class=\"wp-caption aligncenter\" style=\"width: 300px;\" aria-describedby=\"caption-attachment-14844\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-26-at-11.51.20.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14844\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-26-at-11.51.20-300x220.png\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-26-at-11.51.20-300x220.png 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-26-at-11.51.20.png 470w\" alt=\"point the images to the right location\" width=\"300\" height=\"220\" \/><\/a>\n<figcaption id=\"caption-attachment-14844\" class=\"wp-caption-text\">point the images to the right location<\/figcaption>\n<\/figure>\n<p>&nbsp;<\/p>\n<p>At this point, you can run the application and see that everything works perfectly well ????<\/p>\n<h3>FAQs<\/h3>\n<p><strong>What is Admin LTE?<\/strong><\/p>\n<p>Admin LTE is an admin dashboard template that can be integrated into web applications to provide a ready-made user interface.<\/p>\n<p><strong>How do I integrate Admin LTE with Angular?<\/strong><\/p>\n<p>You can integrate Admin LTE with Angular by copying the template files into the Angular project&#8217;s assets folder, adding the CSS and JavaScript references, and converting the template sections into Angular components.<\/p>\n<p><strong>Which Admin LTE folders should I copy to an Angular application?<\/strong><\/p>\n<p>For this approach, copy the <code>dist<\/code> and <code>plugins<\/code> folders from the Admin LTE template into the <code>src\/assets<\/code> folder of the Angular application.<\/p>\n<p><strong>Which components should I create when integrating Admin LTE with Angular?<\/strong><\/p>\n<p>The tutorial creates five components: <code>main-header<\/code>, <code>main-sidebar<\/code>, <code>content-wrapper<\/code>, <code>control-sidebar<\/code>, and <code>main-footer<\/code>.<\/p>\n<p><strong>Why are the Admin LTE images not displaying in Angular?<\/strong><\/p>\n<p>The image paths from the original Admin LTE template need to be updated to point to the Angular assets folder. For example, replace <code>dist\/img<\/code> with <code>assets\/dist\/img<\/code>.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>Integrating Admin LTE with Angular can be done by copying the template files rather than installing the Admin LTE package. This approach gives you more flexibility over how the template is organized within the Angular application.<\/p>\n<p>Once the CSS and JavaScript files are connected, the main sections are converted into Angular components and the image paths are updated, the Admin LTE interface can run as part of your Angular application.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to integrate Admin LTE with Angular by copying the template files, adding CSS and JS links, creating components, and fixing image links.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1999","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1999"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1999\/revisions"}],"predecessor-version":[{"id":2576,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1999\/revisions\/2576"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}