{"id":20355938,"url":"https://github.com/hedzr/adminlte-app","last_synced_at":"2026-05-07T17:41:10.701Z","repository":{"id":38442946,"uuid":"364761311","full_name":"hedzr/adminLTE-app","owner":"hedzr","description":"angular cli app (angular 10+ and AmidnLTE 3.1.0)","archived":false,"fork":false,"pushed_at":"2024-10-10T18:10:22.000Z","size":18868,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T01:08:10.416Z","etag":null,"topics":["admin-dashboard","adminlte","adminlte3","angular","angular-cli","angular-cli10"],"latest_commit_sha":null,"homepage":"https://hedzr.github.io/web/angular/howto-integrate-admin-lte-with-angular-x/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hedzr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-06T02:25:42.000Z","updated_at":"2024-06-20T00:00:31.000Z","dependencies_parsed_at":"2024-03-28T21:48:46.965Z","dependency_job_id":null,"html_url":"https://github.com/hedzr/adminLTE-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hedzr%2FadminLTE-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hedzr%2FadminLTE-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hedzr%2FadminLTE-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hedzr%2FadminLTE-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hedzr","download_url":"https://codeload.github.com/hedzr/adminLTE-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241889630,"owners_count":20037545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","adminlte","adminlte3","angular","angular-cli","angular-cli10"],"created_at":"2024-11-14T23:14:32.827Z","updated_at":"2026-05-07T17:41:10.671Z","avatar_url":"https://github.com/hedzr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AdminLTEApp\n\n`AdminLTE-app` is a simple [Angular CLI](https://github.com/angular/angular-cli) v10.2.0\nweb application integrating with [AdminLTE 3.1.0](https://github.com/ColorlibHQ/AdminLTE/releases) .\n\n## How to Integrate AdminLTE Latest Release with Angular 10+\n\nThe following guide is rewritten based the original [this](https://www.prishusoft.com/blog/Integrate-AdminLTE-theme-to-Angular-Project.html).\n\n### Steps\n\n#### Step 1: Install the Angular CLI\n\n```bash\nyarn global ass @angular/cli\n# or: npm install -g @angular/cli\n```\n\n#### Step 2: Create a workspace and initial application\n\n```bash\nng new adminLTE-app\n\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]\nCREATE adminLTE-app/angular.json (3958 bytes)\nCREATE adminLTE-app/package.json (1313 bytes)\n\n```\n\n#### Step 3: Serve the application\n\n```bash\ncd adminLTE-app\nnpm start\n# or: ng serve --open\n```\n\nAnd open the main page at: http://localhost:4200/\n\n#### Step 4: Download the Latest Release of Amin LTE\n\nVisit the releases section on Github and download the latest release.\n\n[**Download latest release**](https://github.com/ColorlibHQ/AdminLTE/releases)\n\nFrom the latest release need to download the SourceCode.zip file and extract that file.\n\n#### Step 5: Add AdminLTE required file to Asset Folder\n\nFrom the Admin LTE Code copy the “dist” and “plugins” folder to assets folder (`\u003capp\u003e/src/assets/`).\n\n#### Step 6: Import the Admin LTE javascript and css\n\nImport the javascript and Css file from the asset folder to Index.html file as mention below.\n\nAnd `\u003capp\u003e/src/index.html` should be like this:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003eAdminLTEApp\u003c/title\u003e\n  \u003cbase href=\"/\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n\n\n  \u003c!-- Google Font: Source Sans Pro --\u003e\n  \u003clink rel=\"stylesheet\"\n    href=\"https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700\u0026display=fallback\"\u003e\n  \u003c!-- Font Awesome Icons --\u003e\n  \u003clink rel=\"stylesheet\" href=\"assets/plugins/fontawesome-free/css/all.min.css\"\u003e\n  \u003c!-- IonIcons --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css\"\u003e\n  \u003c!-- Theme style --\u003e\n  \u003clink rel=\"stylesheet\" href=\"assets/dist/css/adminlte.min.css\"\u003e\n\n\u003c/head\u003e\n\n\u003c!--\n  skin-blue  layout-top-nav login-page\n\n`body` tag options:\n\n  Apply one or more of the following classes to to the body tag\n  to get the desired effect\n\n  * sidebar-collapse\n  * sidebar-mini\n\n--\u003e\n\n\u003cbody class=\"hold-transition sidebar-mini\"\u003e\n  \u003capp-root\u003e\u003c/app-root\u003e\n\n  \u003c!-- REQUIRED SCRIPTS --\u003e\n\n  \u003c!-- jQuery --\u003e\n  \u003cscript src=\"assets/plugins/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- Bootstrap --\u003e\n  \u003cscript src=\"assets/plugins/bootstrap/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- AdminLTE --\u003e\n  \u003cscript src=\"assets/dist/js/adminlte.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- OPTIONAL SCRIPTS --\u003e\n  \u003cscript src=\"assets/plugins/chart.js/Chart.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- AdminLTE for demo purposes --\u003e\n  \u003cscript src=\"assets/dist/js/demo.js\"\u003e\u003c/script\u003e\n  \u003c!-- AdminLTE dashboard demo (This is only for demo purposes) --\u003e\n  \u003cscript src=\"assets/dist/js/pages/dashboard3.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\n\n#### Step 7: Add Components for Header\n\nRun the following command in terminal / command line\n\n```bash\nng g c appheader\n```\n\nWhich Create the appheader component as below.\n\n[![img](https://user-images.githubusercontent.com/12786150/117232958-cde8bd00-ae54-11eb-86db-ff3a2a2ef95e.png)\n\nNow open the `appheader.component.html` and copy `Navbar` chapter from `index3.html` with AdminLTE source code folder.\n\nCopy all the HTML Content between `\u003cnav\u003e\u003c/nav\u003e` Including `nav` tag into appheader.component.html.\n\nThe `appheader.component.html` looks like:\n\n```html\n\u003c!-- Navbar --\u003e\n\u003cnav class=\"main-header navbar navbar-expand navbar-white navbar-light\"\u003e\n  \u003c!-- Left navbar links --\u003e\n  \u003cul class=\"navbar-nav\"\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link\" data-widget=\"pushmenu\" href=\"#\" role=\"button\"\u003e\u003ci class=\"fas fa-bars\"\u003e\u003c/i\u003e\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item d-none d-sm-inline-block\"\u003e\n      \u003ca href=\"index.html\" class=\"nav-link\"\u003eHome\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item d-none d-sm-inline-block\"\u003e\n      \u003ca href=\"#\" class=\"nav-link\"\u003eContact\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003c!-- Right navbar links --\u003e\n  \u003cul class=\"navbar-nav ml-auto\"\u003e\n    \u003c!-- Navbar Search --\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link\" data-widget=\"navbar-search\" href=\"#\" role=\"button\"\u003e\n        \u003ci class=\"fas fa-search\"\u003e\u003c/i\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"navbar-search-block\"\u003e\n        \u003cform class=\"form-inline\"\u003e\n          \u003cdiv class=\"input-group input-group-sm\"\u003e\n            \u003cinput class=\"form-control form-control-navbar\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n            \u003cdiv class=\"input-group-append\"\u003e\n              \u003cbutton class=\"btn btn-navbar\" type=\"submit\"\u003e\n                \u003ci class=\"fas fa-search\"\u003e\u003c/i\u003e\n              \u003c/button\u003e\n              \u003cbutton class=\"btn btn-navbar\" type=\"button\" data-widget=\"navbar-search\"\u003e\n                \u003ci class=\"fas fa-times\"\u003e\u003c/i\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n\n    \u003c!-- Messages Dropdown Menu --\u003e\n    \u003cli class=\"nav-item dropdown\"\u003e\n      \u003ca class=\"nav-link\" data-toggle=\"dropdown\" href=\"#\"\u003e\n        \u003ci class=\"far fa-comments\"\u003e\u003c/i\u003e\n        \u003cspan class=\"badge badge-danger navbar-badge\"\u003e3\u003c/span\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"dropdown-menu dropdown-menu-lg dropdown-menu-right\"\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003c!-- Message Start --\u003e\n          \u003cdiv class=\"media\"\u003e\n            \u003cimg src=\"assets/dist/img/user1-128x128.jpg\" alt=\"User Avatar\" class=\"img-size-50 mr-3 img-circle\"\u003e\n            \u003cdiv class=\"media-body\"\u003e\n              \u003ch3 class=\"dropdown-item-title\"\u003e\n                Brad Diesel\n                \u003cspan class=\"float-right text-sm text-danger\"\u003e\u003ci class=\"fas fa-star\"\u003e\u003c/i\u003e\u003c/span\u003e\n              \u003c/h3\u003e\n              \u003cp class=\"text-sm\"\u003eCall me whenever you can...\u003c/p\u003e\n              \u003cp class=\"text-sm text-muted\"\u003e\u003ci class=\"far fa-clock mr-1\"\u003e\u003c/i\u003e 4 Hours Ago\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003c!-- Message End --\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003c!-- Message Start --\u003e\n          \u003cdiv class=\"media\"\u003e\n            \u003cimg src=\"assets/dist/img/user8-128x128.jpg\" alt=\"User Avatar\" class=\"img-size-50 img-circle mr-3\"\u003e\n            \u003cdiv class=\"media-body\"\u003e\n              \u003ch3 class=\"dropdown-item-title\"\u003e\n                John Pierce\n                \u003cspan class=\"float-right text-sm text-muted\"\u003e\u003ci class=\"fas fa-star\"\u003e\u003c/i\u003e\u003c/span\u003e\n              \u003c/h3\u003e\n              \u003cp class=\"text-sm\"\u003eI got your message bro\u003c/p\u003e\n              \u003cp class=\"text-sm text-muted\"\u003e\u003ci class=\"far fa-clock mr-1\"\u003e\u003c/i\u003e 4 Hours Ago\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003c!-- Message End --\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003c!-- Message Start --\u003e\n          \u003cdiv class=\"media\"\u003e\n            \u003cimg src=\"assets/dist/img/user3-128x128.jpg\" alt=\"User Avatar\" class=\"img-size-50 img-circle mr-3\"\u003e\n            \u003cdiv class=\"media-body\"\u003e\n              \u003ch3 class=\"dropdown-item-title\"\u003e\n                Nora Silvester\n                \u003cspan class=\"float-right text-sm text-warning\"\u003e\u003ci class=\"fas fa-star\"\u003e\u003c/i\u003e\u003c/span\u003e\n              \u003c/h3\u003e\n              \u003cp class=\"text-sm\"\u003eThe subject goes here\u003c/p\u003e\n              \u003cp class=\"text-sm text-muted\"\u003e\u003ci class=\"far fa-clock mr-1\"\u003e\u003c/i\u003e 4 Hours Ago\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003c!-- Message End --\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item dropdown-footer\"\u003eSee All Messages\u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003c!-- Notifications Dropdown Menu --\u003e\n    \u003cli class=\"nav-item dropdown\"\u003e\n      \u003ca class=\"nav-link\" data-toggle=\"dropdown\" href=\"#\"\u003e\n        \u003ci class=\"far fa-bell\"\u003e\u003c/i\u003e\n        \u003cspan class=\"badge badge-warning navbar-badge\"\u003e15\u003c/span\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"dropdown-menu dropdown-menu-lg dropdown-menu-right\"\u003e\n        \u003cspan class=\"dropdown-item dropdown-header\"\u003e15 Notifications\u003c/span\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003ci class=\"fas fa-envelope mr-2\"\u003e\u003c/i\u003e 4 new messages\n          \u003cspan class=\"float-right text-muted text-sm\"\u003e3 mins\u003c/span\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003ci class=\"fas fa-users mr-2\"\u003e\u003c/i\u003e 8 friend requests\n          \u003cspan class=\"float-right text-muted text-sm\"\u003e12 hours\u003c/span\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item\"\u003e\n          \u003ci class=\"fas fa-file mr-2\"\u003e\u003c/i\u003e 3 new reports\n          \u003cspan class=\"float-right text-muted text-sm\"\u003e2 days\u003c/span\u003e\n        \u003c/a\u003e\n        \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n        \u003ca href=\"#\" class=\"dropdown-item dropdown-footer\"\u003eSee All Notifications\u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link\" data-widget=\"fullscreen\" href=\"#\" role=\"button\"\u003e\n        \u003ci class=\"fas fa-expand-arrows-alt\"\u003e\u003c/i\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link\" data-widget=\"control-sidebar\" data-slide=\"true\" href=\"#\" role=\"button\"\u003e\n        \u003ci class=\"fas fa-th-large\"\u003e\u003c/i\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n\u003c!-- /.navbar --\u003e\n```\n\n\n\nNow add `appheader.component` to `app.component.html` as mention below\n\n```ts\n\u003capp-appheader\u003e\u003c/app-appheader\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\nRun the Application again and you can see the header is set as per below screen shot\n\n~~skip~~\n\n\n\n#### Step 8: Add Components for Left Menu\n\nRun the following command in terminal / command line\n\n```bash\nng g c appsidebar\n\nCREATE src/app/appsidebar/appsidebar.component.html (26 bytes)\nCREATE src/app/appsidebar/appsidebar.component.spec.ts (635 bytes)\nCREATE src/app/appsidebar/appsidebar.component.ts (274 bytes)\nCREATE src/app/appsidebar/appsidebar.component.scss (0 bytes)\nUPDATE src/app/app.module.ts (763 bytes)\n```\n\nCopy all the HTML Content between \u003caside\u003e\u003c/aside\u003e Including aside tag into `appsidebar.component.html`\n\nNow add `appsidebar.component` to `app.component.html` as mention below\n\n```ts\n\u003capp-appheader\u003e\u003c/app-appheader\u003e\n\u003capp-appsidebar\u003e\u003c/app-appsidebar\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\nAfter run the application you can see the output as below:\n\n~~skip~~\n\n\n\n#### Step 9: Add Components for Footer\n\nRun the following command in terminal / Command line\n\n```ts\nng g c appfooter\n\nCREATE src/app/appfooter/appfooter.component.html (28 bytes)\nCREATE src/app/appfooter/appfooter.component.spec.ts (649 bytes)\nCREATE src/app/appfooter/appfooter.component.ts (282 bytes)\nCREATE src/app/appfooter/appfooter.component.scss (0 bytes)\nUPDATE src/app/app.module.ts (857 bytes)\n```\n\nCopy all the HTML Content between `\u003cfooter\u003e\u003c/footer\u003e` Including aside tag into `appfooter.component.html`, and it looks like:\n\n```html\n\u003c!-- Main Footer --\u003e\n\u003cfooter class=\"main-footer\"\u003e\n  \u003cstrong\u003eCopyright \u0026copy; 2014-2021 \u003ca href=\"https://adminlte.io\"\u003eAdminLTE.io\u003c/a\u003e.\u003c/strong\u003e\n  All rights reserved.\n  \u003cdiv class=\"float-right d-none d-sm-inline-block\"\u003e\n    \u003cb\u003eVersion\u003c/b\u003e 3.1.0\n  \u003c/div\u003e\n\u003c/footer\u003e\n```\n\nNow add `appfooter.component` to `app.component.html` as mention below\n\n```ts\n\u003capp-appheader\u003e\u003c/app-appheader\u003e\n\u003capp-appsidebar\u003e\u003c/app-appsidebar\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003capp-appfooter\u003e\u003c/app-appfooter\u003e\n```\n\nNote: As we have not added any content part so footer is display on top.\n\n~~skip~~\n\n\n\n#### Step 10: Add Components for Settings\n\nRun the following command in terminal / Command line\n\n```ts\nng g c appsetting\n\nCREATE src/app/appsetting/appsetting.component.html (29 bytes)\nCREATE src/app/appsetting/appsetting.component.spec.ts (656 bytes)\nCREATE src/app/appsetting/appsetting.component.ts (286 bytes)\nCREATE src/app/appsetting/appsetting.component.scss (0 bytes)\nUPDATE src/app/app.module.ts (955 bytes)\n```\n\nCopy all the HTML Content between `\u003caside\u003e\u003c/aside\u003e` Including aside tag into `appsetting.component.html`. This html content you can find after footer html in admin LTE theme. And after added ,the `appsetting.component.html` looks like:\n\n```html\n\u003c!-- Control Sidebar --\u003e\n\u003caside class=\"control-sidebar control-sidebar-dark\"\u003e\n  \u003c!-- Control sidebar content goes here --\u003e\n\u003c/aside\u003e\n\u003c!-- /.control-sidebar --\u003e\n```\n\nNow add appsetting.component to app.component.html as mention below\n\n```ts\n\u003cdiv class=\"wrapper\"\u003e\n  \u003capp-appheader\u003e\u003c/app-appheader\u003e\n  \u003capp-appsidebar\u003e\u003c/app-appsidebar\u003e\n\n\n  \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\n\n  \u003capp-appfooter\u003e\u003c/app-appfooter\u003e\n  \u003capp-appsetting\u003e\u003c/app-appsetting\u003e\n\n\u003c/div\u003e\u003c!-- ./wrapper --\u003e\n```\n\nAfter you run the application you can see the setting menu is display\n\n~~skip~~\n\n\n\n#### Step 11: Add Dashboard component\n\nAs now we have setup the Header, Footer, Menu, setting component now we can create dashboard component and add middle content from the theme.\n\nRun the following command in terminal / Command line\n\n```ts\nng g c dashboard\n\nCREATE src/app/dashboard/dashboard.component.html (28 bytes)\nCREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)\nCREATE src/app/dashboard/dashboard.component.ts (282 bytes)\nCREATE src/app/dashboard/dashboard.component.scss (0 bytes)\nUPDATE src/app/app.module.ts (1049 bytes)\n```\n\nCopy all the HTML Content of Content Wrapper (`\u003c\u003e`). Contains page content into `ashboard.component.html`. Its partial contents should be like this:\n\n```\n\u003c!-- Content Wrapper. Contains page content --\u003e\n\u003cdiv class=\"content-wrapper\"\u003e\n...\n\u003c/div\u003e\n\u003c!-- /.content-wrapper --\u003e\n```\n\nNow we add the new route path for it:\n\nOpen `app-routing.module.ts`, and insert string into `routes` array:\n\n```ts\nconst routes: Routes = [\n\n  { path: 'dashboard', component: DashboardComponent },\n  // { path: 'second-component', component: SecondComponent },\n];\n```\n\nBefore `routes`, we import the dashboard component:\n\n```ts\nimport { DashboardComponent } from './dashboard/dashboard.component';\n```\n\nSo the final `app-routing.module.ts`looks like:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\n\nimport { DashboardComponent } from './dashboard/dashboard.component';\n\nconst routes: Routes = [\n\n  { path: 'dashboard', component: DashboardComponent },\n  // { path: 'second-component', component: SecondComponent },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n```\n\nAll folks!\n\nHere is all we set now Admin LTE Theme See below screen shot\n\n\u003cimg width=\"1420\" alt=\"image-20210506095211202\" src=\"https://user-images.githubusercontent.com/12786150/117233044-f5d82080-ae54-11eb-9ba5-310473cb4b23.png\"\u003e\n\n\n\n\n## Short For Angular Dev\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.0.\n\n### Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n### Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n### Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n### Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n### Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n### Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhedzr%2Fadminlte-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhedzr%2Fadminlte-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhedzr%2Fadminlte-app/lists"}