{"id":26902547,"url":"https://github.com/grachpower/ngx-role-permissions","last_synced_at":"2025-10-03T19:33:06.610Z","repository":{"id":33108341,"uuid":"150891417","full_name":"grachpower/ngx-role-permissions","owner":"grachpower","description":"Angular role permission library","archived":false,"fork":false,"pushed_at":"2023-01-04T21:37:59.000Z","size":5782,"stargazers_count":6,"open_issues_count":30,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T14:33:52.780Z","etag":null,"topics":["angular","angular-permissions","ngx","permissions","roles"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grachpower.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-29T18:20:32.000Z","updated_at":"2022-12-09T07:27:31.000Z","dependencies_parsed_at":"2023-01-14T23:23:31.079Z","dependency_job_id":null,"html_url":"https://github.com/grachpower/ngx-role-permissions","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/grachpower%2Fngx-role-permissions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grachpower%2Fngx-role-permissions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grachpower%2Fngx-role-permissions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grachpower%2Fngx-role-permissions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grachpower","download_url":"https://codeload.github.com/grachpower/ngx-role-permissions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246266243,"owners_count":20749754,"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":["angular","angular-permissions","ngx","permissions","roles"],"created_at":"2025-04-01T09:43:59.672Z","updated_at":"2025-10-03T19:32:57.177Z","avatar_url":"https://github.com/grachpower.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-role-permissions\n[![npm version](https://badge.fury.io/js/ngx-role-permissions.svg)](https://badge.fury.io/js/ngx-role-permissions)\n[![Build Status](https://travis-ci.com/grachpower/ngx-role-permissions.svg?branch=master)](https://travis-ci.com/grachpower/ngx-role-permissions)\n\nPermission and roles based access control for your angular(angular 6,7,8+) applications\n\n\n## Documentation and examples\n\nv2.0.0 have critical changes\n\nsee CHANGELOG.MD\n\n\n## Demo\n[Demo ngx-role-permissions] (https://stackblitz.com/edit/ngx-role-permissions)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-role-permissions --save\n```\n\n## Consuming library\n\nYou can import library in any Angular application by running:\n\n```bash\n$ npm install ngx-role-permissions  --save\n```\n\nand then from your Angular `AppModule`:\n\nuse `NgxPermissionModule` with `withElements` in any of your modules\nuse `LockTypes.UNLOCKABLE` provide roles for which elements will be available \n`LockTypes.UNLOCKABLE` tells if current element will be block with specified roles \n\nas anther aproach provide `PERMISSION_CONFIG_TOKEN` token with `doorlock`\nuse `lockWith` declaration to declare blocking keys\nuse `unlockWith` as an opposite to `lockWith`\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { NgxPermissionModule, LockTypes, PERMISSION_CONFIG_TOKEN, doorlock } from 'ngx-role-permissions';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n\n    // Specify your library as an import\n     NgxPermissionModule.withElements([\n       {name: 'yourElement1', lockType: LockTypes.UNLOCKABLE, keys: ['user', 'admin']},\n       {name: 'yourElement2', lockType: LockTypes.LOCKABLE, keys: ['user']},\n     ]),\n  ],\n  {\n      provide: PERMISSION_CONFIG_TOKEN,\n      multi: true,\n      useValue: [\n        doorlock(PermElementTypes.PAGE_ELEMENT).lockWith(['admin']),\n        doorlock(PermElementTypes.CHILD_ONE).unlockWith(['user', 'admin']),\n      ],\n    }\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nProviding initial roles:\n`INITIAL_ROLES` is multitoken that can provide initial roles\n```typescript\n@NgModule({\n  ...\n  imports: [\n    // Specify your library as an import\n     NgxPermissionModule.withElements([\n       ...\n     ]),\n  ],\n  providers: [\n      provide: INITIAL_ROLES,\n      multi: true,\n      useValue: ['user'], //your roles\n  ]\n})\nexport class AppModule { }\n```\n\n\nSharedModule\n\nIf you use a SharedModule that you import in multiple other feature modules, you can export the NgxPermissionModule to make sure you don't have to import it in every module.\nNgxPermissionModule with or without `withElements`notations provides `canPermit` and `canNotPermit` directive so you should import it in every module you use permission directives.  \n```typescript\n@NgModule({\n    exports: [\n        CommonModule,\n        NgxPermissionModule,\n    ]\n})\nexport class SharedModule { }\n```\n\nOnce your library is imported, you can use its components, directives and pipes in your Angular application:\n\nImport service to the main application and load permissions\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { PermissionService } from 'ngx-role-permissions';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  title = 'ngx-role-permissions';\n\n  constructor(\n    private permissionService: PermissionService,\n  ) {}\n\n  public ngOnInit(): void {\n    this.permissionService.setRoles([\n      'user',\n    ]);\n\n    // append role\n    this.permissionService.addRole('admin');\n\n    // remove role\n    this.permissionService.removeRole('admin');\n  }\n}\n\n```\n\nUsage in templates \n\n`*canPermit` check if element roles includes current user role\n```html\n\u003cdiv class=\"element-two\" *canPermit=\"'yourFeatureElement1'\"\u003e\n    Feature element one directive example\n\u003c/div\u003e\n```\n\n`*canNotPermit` check if element roles excludes current user role\n```html\n\u003cdiv class=\"element-two\" *canNotPermit=\"'yourFeatureElement1'\"\u003e\n    Feature element one directive example\n\u003c/div\u003e\n```\n### Managing permissions\n\n\nUsage in routing guards:\n`permissionConfig` placed in data declare route configuration.\n`permission element` - name of element which defined in module.\n`redirectRoute` - router path to redirect page if current route is blocked.\nIf `redirectRoute` was not defined no redirect will be done\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { PermissionGuard } from 'ngx-role-permissions';\n\nconst routes: Routes = [\n  {\n    path: 'one',\n    component: ChildComponent1,\n    canActivate: [PermissionGuard],\n    data: {\n      permissionConfig: {\n        permissionElement: 'yourFeatureElement2',\n      }\n    }\n  },\n  {\n    path: 'two',\n    component: ChildComponent2,\n    canActivate: [PermissionGuard],\n    data: {\n      permissionConfig: {\n        permissionElement: 'yourFeatureElement2',\n        redirectRoute: '/dashboard',\n      }\n    }\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule]\n})\nexport class ChildTwoRoutingModule { }\n```\n\nUsage in custom directives/guards/components etc.\n```typescript\n@Directive({\n  selector: '[canAccess]',\n})\nexport class CanPermitDirective implements OnChanges, OnDestroy {\n  private permissionSubscription: SubscriptionLike;\n\n  constructor(\n    private permissionService: PermissionService,\n    private viewContainer: ViewContainerRef,\n    private templateRef: TemplateRef\u003cany\u003e,\n  ) {}\n\n  @Input() canAccess: string;\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    this.initPermissionCheck(changes.canPermit.currentValue);\n  }\n\n  public ngOnDestroy(): void {\n    this.permissionSubscription.unsubscribe();\n    this.permissionSubscription = null;\n  }\n\n  private initPermissionCheck(elementName: string): void {\n    if (!!this.permissionSubscription) {\n      this.permissionSubscription.unsubscribe();\n      this.permissionSubscription = null;\n    }\n\n    this.permissionSubscription = this.permissionService.canAccess(elementName)\n      .subscribe((res: boolean) =\u003e {\n        if (!!res \u0026\u0026 !!this.templateRef) {\n          this.viewContainer.clear();\n          this.viewContainer.createEmbeddedView(this.templateRef, {});\n        } else {\n          this.viewContainer.clear();\n        }\n      });\n  }\n}\n```\n\n\n## For google\nangular permissions, angular 6 permissions, angular permissions, angular 6 permissions ng2 permissions ng permissions\nng-permissions ng2-permissions angular2 permissions  angular4 permissions angular 5 permissions\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrachpower%2Fngx-role-permissions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrachpower%2Fngx-role-permissions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrachpower%2Fngx-role-permissions/lists"}