{"id":16429505,"url":"https://github.com/twanoo67/ngx-admin-lte","last_synced_at":"2026-03-17T11:09:20.851Z","repository":{"id":38324993,"uuid":"92981298","full_name":"TwanoO67/ngx-admin-lte","owner":"TwanoO67","description":"Admin LTE for Angular 2/4/6/8 as a NPM package","archived":false,"fork":false,"pushed_at":"2023-01-04T21:36:14.000Z","size":7451,"stargazers_count":109,"open_issues_count":44,"forks_count":47,"subscribers_count":15,"default_branch":"develop","last_synced_at":"2025-02-11T11:31:03.290Z","etag":null,"topics":["admin-lte","adminlte","angular","angular8"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/TwanoO67.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-31T19:29:33.000Z","updated_at":"2024-10-02T17:41:51.000Z","dependencies_parsed_at":"2023-02-02T20:46:22.913Z","dependency_job_id":null,"html_url":"https://github.com/TwanoO67/ngx-admin-lte","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwanoO67%2Fngx-admin-lte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwanoO67%2Fngx-admin-lte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwanoO67%2Fngx-admin-lte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwanoO67%2Fngx-admin-lte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TwanoO67","download_url":"https://codeload.github.com/TwanoO67/ngx-admin-lte/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243823369,"owners_count":20353659,"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-lte","adminlte","angular","angular8"],"created_at":"2024-10-11T08:23:13.299Z","updated_at":"2026-03-17T11:09:15.831Z","avatar_url":"https://github.com/TwanoO67.png","language":"TypeScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ghostsmaker@hotmail.com\u0026lc=US\u0026item_name=TwanoO67\u0026item_number=ngx-admin-lte\u0026no_note=0\u0026currency_code=EUR"],"categories":[],"sub_categories":[],"readme":"# ngx-admin-lte\n\n[![Join the chat at https://gitter.im/TwanoO67/ngx-admin-lte](https://badges.gitter.im/TwanoO67/ngx-admin-lte.svg)](https://gitter.im/TwanoO67/ngx-admin-lte?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://travis-ci.org/TwanoO67/ngx-admin-lte.svg?branch=master)](https://travis-ci.org/TwanoO67/ngx-admin-lte)\n\nAdmin-LTE for Angular 4/5/6/8 as a NPM package\n\n![\"AdminLTE Presentation\"](https://adminlte.io/AdminLTE2.png \"AdminLTE Presentation\")\n\nThis project is a library to integrate in your own project.\nIf your are looking for a full bootstrapping using this library, please check: [Bootstrapping Ngx-Admin-Lte](https://github.com/TwanoO67/bootstraping-ngx-admin-lte)\n\n\n## Documentation\n\nDocumentation is available here [Documentation](https://twanoo67.github.io/ngx-admin-lte)\n\n## Support \u0026 Contribution\n\nThis project is maintained on personnal time.\n\nAs so weI can't assure you that all questions/issues will be answered as quickly as you need.\n\nBut the communauty around it is growing fast, more than 200 projects are using it\n\nAnd it's an open-source project, so feel free to add feature / fix issues via Pull Requests (they will be merged quickly).\n\nFurthermore, if you like this project and you do want to help us, please considere donating.\n\nEvery little help is welcome :)\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ghostsmaker@hotmail.com\u0026lc=US\u0026item_name=TwanoO67\u0026item_number=ngx-admin-lte\u0026no_note=0\u0026currency_code=EUR)\n\n\n## Version\n\n- For Angular 2 use package v1\n- For Angular 4/6 use package v2\n- For Angular 8 use package v3\n\n## Installation\n\nThis lib is only tested on angular-cli projects, but it may work in any angular project.\n\nInstall this lib in your existing project with\n`yarn add ngx-admin-lte` or `npm install ngx-admin-lte`\n\n  in your app.modules.ts, add these statements:\n  ```javascript\n  import { NgxAdminLteModule } from 'ngx-admin-lte';\n\n  @NgModule({\n  // ...\n  imports: [\n    // ...\n    NgxAdminLteModule,\n```\n\n  Add js and css of admin-lte in your project like so:\n\nin your angular.json\n```json\n  \"assets\": [\n    \"src/favicon.ico\",\n    \"src/assets\",\n    { \"glob\": \"**/*\", \"input\": \"node_modules/ngx-admin-lte/public/assets\", \"output\": \"./assets\" }\n  ],\n  \"scripts\": [\n    \"node_modules/jquery/dist/jquery.min.js\",\n    \"node_modules/bootstrap/dist/js/bootstrap.min.js\",\n    \"node_modules/admin-lte/dist/js/app.min.js\"\n  ],\n  \"styles\": [\n    \"src/styles.scss\"\n  ]\n```\n\nin your style.scss\n```css\n  @import \"../node_modules/admin-lte/dist/css/AdminLTE.min.css\";\n  @import \"../node_modules/admin-lte/dist/css/skins/_all-skins.min.css\";\n  @import \"../node_modules/bootstrap/dist/css/bootstrap.min.css\";\n  @import \"../node_modules/font-awesome/css/font-awesome.min.css\";\n  @import \"../node_modules/ionicons/dist/css/ionicons.min.css\";\n```\n\nthen you can declare your component with the adminLte template in your router:\n\n```javascript\n  import { CanActivateGuard, LayoutAuthComponent } from 'ngx-admin-lte';\n  ...\n  const routes: Routes = [\n    // logged routes\n    {\n      canActivate: [CanActivateGuard],\n      children: [\n        {\n          canActivate: [CanActivateGuard],\n          component: HomeComponent,\n          path: 'home'\n        },\n        {\n          canActivate: [CanActivateGuard],\n          component: PageNumComponent,\n          path: 'page/:id'\n        },\n      ],\n      component: LayoutAuthComponent,\n      path: '',\n    },\n    // not logged routes\n    {\n      component: LayoutLoginComponent,\n      path: 'login'\n    },\n    {\n      component: RegisterComponent,\n      path: 'register'\n    }\n  ];\n```\n\n## Handling Translation\n\nIn order to use the translation files given by the libraries, you should configure your angular.json as:\n\n```json\n   { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-admin-lte/src/public/assets\", \"output\": \"./assets\" }\n```\n\nBut if you want to provide your own translation files, lets say in a folder named \"src/public/i18n\" in your project.\n( That you could have initialised it by doing `cp -r ./node_modules/ngx-admin-lte/src/public/assets/i18n ./src/public/` in your project)\n\nYou could do that like so:\n\n```json\n    { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-admin-lte/src/public/assets/img\", \"output\": \"./assets/img\" },\n    { \"glob\": \"**/*\", \"input\": \"./public/i18n\", \"output\": \"./assets/i18n\" }\n```\n\nSame principle applies if you want to override the \"img\" assets folder\n\n## Configuration\n\nYou can change skin and hide some buttons by passing data to the layout component like so:\n\n```javascript\n  component: LayoutAuthComponent,\n  data: [{\n      'skin': 'skin-black',\n      /*\n      // USE THIS IS YOU WANT TO HIDE SOME TEMPLATE PART\n      'boxed_style': false,\n      'display_tasks': false,\n      'display_control': false,\n      'display_user': false,\n      'display_messages': false,\n      'display_notifications': false,\n      'display_menu_user': false,\n      'display_menu_search': false,\n      'display_logout': true,\n      'display_control_sidebar': true,\n      header_components: []\n      */\n    }],\n```\n\nDEPRECATED:\nPlease don't use 'menu_title' anymore, you can just set 'header' property in your links setting.\n\nDon't forget to import the css skin in you style.css if you use it.\n\n## Additionnal components\n\nYou can add some components in the header by adding some in the configuration of the layout like so:\n\n```\n'header_components': [{\n  class: MenuWidgetComponent,\n  data: {\n    label: 'test widget'\n  }\n}]\n```\n\nthe same structure can be used in the menu configuration to add components in the left menu.\n\n```\nimport { MenuWidgetComponent } from './widgets/menu-widget/menu-widget.component';\n...\nlet mylinks = [\n  //some standard link ...\n    {\n      'title': 'External Links',\n      'icon': 'link',\n      'sublinks': [\n        {\n          'title': 'Github',\n          'link': ['https://github.com/TwanoO67/ngx-admin-lte'],\n          'icon': 'github',\n          'external': true,\n          'target': '_blank'\n        }\n      ]\n    },\n    // and an additionnal component\n    {\n      class: MenuWidgetComponent,\n      data: {\n        label: 'test component'\n      }\n    }\n  ];\n// then define the menu\n    this.menuService.setCurrent(this.mylinks);\n```\n\nDon't forget to add your component to the declarations and entryComponents part of your module file.\nThose components must implement OnChanges (so they can receive data)\n\n## Services\n\nIf you need some practical example of using this services, check out the project [Bootstraping-ngx-admin-lte](https://github.com/TwanoO67/bootstraping-ngx-admin-lte)\n\n### BreadcrumbService\n\nHelper to set the breadcrumb in a LayoutAuthComponent extended page.\n\nExample for an homepage:\n```javascript\n  constructor(\n    private breadServ: BreadcrumbService\n  ) {\n\n  public ngOnInit() {\n    // settings the header for the home\n    this.breadServ.setCurrent({\n      description: 'HomePage',\n      display: true,\n      header: 'Dashboard',\n      levels: [\n        {\n          icon: 'dashboard',\n          link: ['/'],\n          title: 'Home'\n        }\n      ]\n    });\n  }\n\n  public ngOnDestroy() {\n    // removing the header\n    this.breadServ.clear();\n  }\n```\n\n### CanActivateGuard\n\nService that check if the user is connected.\nIf you want to use it, just put in you routes like, so;\n\n```javascript\n  import { CanActivateGuard } from 'ngx-admin-lte';\n\n  // ...\n  {\n    component: MyComponent,\n    canActivate: [CanActivateGuard],\n    path: 'mycompo'\n  }\n```\n\nAnd set a `user.connected = true` in your user service.\n\nExample of a basic login page:\n\n```javascript\n  constructor(\n    private userServ: UserService,\n    private router: Router\n  ) {\n\n  private login() {\n    // DOING SOME BACKOFFICE STUFF ON THE SERVER\n\n    // then if the server said OK, then log the user in js\n    if ( 1 === 1 ) {\n\n      const user1 = new User( {\n          avatarUrl: 'assets/img/user2-160x160.jpg',\n          email: 'weber.antoine@outlook.com',\n          firstname: 'WEBER',\n          lastname: 'Antoine'\n      } );\n\n      user1.connected = true;\n\n      this.userServ.setCurrent( user1 );\n\n      this.router.navigate( ['home'] );\n    }\n  }\n```\n\n### FooterService\n\nHelper to define the footer of an LayoutAuthComponent extended page.\nuse *setCurrent* to send your footer with `{ left_part: \"some text or\", right_part: \"some \u003cspan\u003ehtml\u003c/span\u003e\"}`\n\n### LoggerService\n\nthe method *log* is used to show some *console.log* using the i18n translation\n\n### LogoService\n\nHelper to define the logo of an LayoutAuthComponent extended page.\nuse *setCurrent* to send your logo with `{\n  html_mini; \"\u003cb\u003eA\u003c/b\u003eLTE\",\n  html_lg; \"\u003cb\u003eAdmin\u003c/b\u003eLTE\",\n}`\n\n\nYou can define your own brand name in the logo, if you want it to be initialised once, do it in your app.compontent.ts like so:\n\n```javascript\n  import { LogoService } from 'ngx-admin-lte';\n\n  constructor(\n    private logoServ: LogoService\n    ){\n\n  // ...\n\n  this.logoServ.setCurrentLogo({\n    html_mini; \"\u003cb\u003eA\u003c/b\u003eLTE\",\n    html_lg; \"\u003cb\u003eAdmin\u003c/b\u003eLTE\",\n  });\n  ```\n\nPlease remove any usage of it.\n\n### MenuService\n\nYou can set the menu links, globally (if you do that in your app.component.ts for example),\nor locally, if you do that in each of your component.\n\n\n```javascript\nimport { User, MenuService, Message, MessagesService } from 'ngx-admin-lte';\n\n// ...\n\n// define here your own links menu structure\nprivate mylinks: any = [\n  {\n    'header': 'Custom Header'\n  },\n  {\n    'title': 'Home',\n    'icon': 'dashboard',\n    'link': ['/']\n  },\n  {\n    'title': 'Sub menu',\n    'icon': 'link',\n    'sublinks': [\n      {\n        'title': 'Page 2',\n        'link': ['/page/2'],\n      },\n      {\n        'title': 'Page 3',\n        'link': ['/page/3'],\n      }\n    ]\n  }\n];\n\nconstructor(\n  private menuServ: MenuService,\n  private msgServ: MessagesService\n) {\n\n}\n\npublic ngOnInit() {\n  // define menu\n  this.menuServ.setCurrentMenu(this.mylinks);\n```\n\n### MessagesService\n\nCan be used to send message in the message box of the header\n\nExample:\n\n```javascript\nconstructor(\n    private msgServ: MessagesService,\n    // ...\n  ) {\n    // ...\n  }\n\n  public ngOnInit() {\n    // FAKE MESSAGE\n    // defining some users\n    const user1 = new User( {\n        avatarUrl: 'assets/img/user2-160x160.jpg',\n        email: 'weber.antoine.pro@gmail.com',\n        firstname: 'WEBER',\n        lastname: 'Antoine'\n    });\n    const user2 = new User( {\n        avatarUrl: 'assets/img/user2-160x160.jpg',\n        email: 'EMAIL',\n        firstname: 'FIRSTNAME',\n        lastname: 'LASTNAME'\n    });\n\n    // sending a test message\n    this.msgServ.addMessage( new Message( {\n        author: user2,\n        content: 'le contenu d\\'un message d\\'une importance extreme',\n        destination: user1,\n        title: 'un message super important'\n    }) );\n```\n\n\n### NotificationsService\n\nCan be used to send notification in the notification box of the header\n\nExample:\n\n```javascript\nconstructor(\n    ...\n    private notifServ: NotificationsService\n  ) {\n    ...\n  }\n\n  public ngOnInit() {\n    // sending a test notification\n    this.notifServ.addNotification( new Notification( {\n        class: 'fa fa-users text-aqua',\n        content: '5 new members joined today',\n        link: '/page/2'\n    }) );\n```\n\n### RestService\n\nAbstract service to contact a REST API.\nYou can use that to do Services for you data models.\n\n\nExample, for a model named \"Device\"\n\n```javascript\nimport { Injectable } from '@angular/core';\nimport { Http, Response, Headers } from '@angular/http';\nimport 'rxjs/add/operator/map'\nimport { Observable } from 'rxjs/Observable';\nimport { Device } from '../../models/device';\nimport { RestService } from \"ngx-admin-lte\";\n\n@Injectable()\nexport class DeviceService extends RestService {\n\n  constructor(_http: Http) {\n      super(_http);\n      this.modelName = 'devices';\n      this.setApiUrl('http://my-rest_api_to_contact/devices');\n  }\n\n  /*This parts are only needed if you want to have correct types for your datas*/\n  public getAll(): Observable\u003cDevice[]\u003e{\n    return super.getAll().map((tab)=\u003e {\n      return \u003cDevice[]\u003etab.map(unit =\u003e new Device(unit) );\n    });\n  }\n\n  public get(id: number): Observable\u003cDevice\u003e{\n      return super.get(id).map((unit) =\u003e \u003cDevice\u003eunit);\n  }\n\n}\n```\n\nThis service will now provide base CRUD functionality respecting the RESP in JSON API format.\n```javascript\n// CONFIGURATION\nsetApiUrl( url: string)\n\n// HELPERS WITH CACHE\ngetAllFromLS(maxtime = 0): Array\u003cany\u003e\ngetFromCache(id): any\n\n// Standard REST functions\ngetAll(): Observable\u003cany[]\u003e\nget(id: number): Observable\u003cany\u003e\nadd(item: any): Observable\u003cnumber\u003e\naddAll(tab: Array\u003cany\u003e): Observable\u003cArray\u003cnumber\u003e\u003e\nupdate(id: number, itemToUpdate: any): Observable\u003cnumber\u003e\ndelete(id: number): Observable\u003cResponse\u003e\n```\n\n### TranslateService\n\nThis service will listen to your user changes and check if the current user has a selected language (in the field `preferredLang`).\nIf so, it will change the language of the app, accordingly.\n\nUse the UserService to change the user, with language set like so:\n\n```javascript\nnew User( {\n    avatarUrl: 'assets/img/user2-160x160.jpg',\n    email: 'weber.antoine@outlook.com',\n    firstname: 'WEBER',\n    lastname: 'Antoine'\n    //set the language here\n    preferredLang: 'fr'\n} );\n```\n\nSupported language are: 'en', 'fr', 'ru', 'he', 'zh'\n\nIf no preferredLang is given, it will take the browser settings, and otherwise default is 'en'.\n\n### User service\n\nThis service is used to send/get the current user information across the app\n\nFor example you can set the current user, in your login page :\n\n```javascript\nimport { User, UserService } from 'ngx-admin-lte';\n\nconstructor(\n  private _user_serv: UserService\n){\n\nngOnInit(){\n  let user = new User({\n    firstname: \"WEBER\",\n    lastname: \"Antoine\",\n    email: \"why-not-yop@yopmail.com\",\n    avatarUrl: \"assets/img/user2-160x160.jpg\"\n  });\n  this._user_serv.setCurrentUser( user );\n```\n\nand you can get the user in a widget:\n\n```javascript\nimport { User, UserService } from 'ngx-admin-lte';\n\nprivate current_user: User;\nconstructor(\n  private _user_serv : UserService,\n){\n  //se connecter au modification du user courant\n  this._user_serv.current_user.subscribe((user: User) =\u003e this.current_user = user);\n```\n\n## Specific Components\n\n### App Header\n\nThis widget handles the header bar, it includes other 'box' widgets for the top navigation:\n\n* Messages Box\n* Notification Box\n* Tasks Box\n* User box\n\n### Messages Box\n\nThis widget is registered to the messages service\n\n### Notification Box\n\nWIP This widget is registered to the notification service\n\n### Tasks Box\n\nWIP This widget is registered to the task service\n\n### User box\n\nThis widget is registered to the user service (for the current user display)\n\n### Menu Aside\n\nThis widget handles the left navigation Menu\nIt is registered to the user service (for the current user display)\n\n## Models\n\n### User\n\n* *firstname*: string, First Name of the user\n* *lastname* : string, Last Name of the user\n* *email* : string, Email address of the user\n* *avatarUrl* : string, URL for the user avatar, could be absolute or relative\n* *creation_date* : string, timestamp of the creation of the user\n\n### Message\n\n* *title* : string, title of the message\n* *content* : string, content of the message\n* *author* : User, source user of the message\n* *destination* : User, destination user of the message\n* *date* : string, date of sending\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwanoo67%2Fngx-admin-lte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwanoo67%2Fngx-admin-lte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwanoo67%2Fngx-admin-lte/lists"}