🔐 ngx-smart-permissions

ngx-smart-permissions is a lightweight and smart Angular library for managing role-based and permission-based access control in Angular applications. Supports both standalone components and NgModules.
Built for Angular 17+ & 18+.

---

✨ Features

• ✅ Show/Hide UI based on permissions or roles
• ✅ Reusable Directives: *ngxHasPermission, *ngxHasRole
• ✅ Built-in Route Guard for permission-based navigation
• ✅ Live permission switching (great for testing/admins)
• ✅ Support for Super Admin
• ✅ Lazy-loaded module support
• ✅ Fully compatible with Standalone Components
• ✅ Easy setup with provideNgxSmartPermissions(...)

---

📦 Installation

npm install ngx-smart-permissions

---

🛠️ Setup

1. Register the providers

In main.ts:

import { provideNgxSmartPermissions } from 'ngx-smart-permissions';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgxSmartPermissions({
      redirectTo: '/unauthorized' // optional
    })
  ]
});

Or inside an NgModule:

@NgModule({
  imports: [
    NgxSmartPermissionsModule
  ]
})
export class AppModule {}

---

🧠 Usage

✅ UI Directive: *ngxHasPermission

<!-- Show only if user has "edit-post" permission -->
<button *ngxHasPermission="'edit-post'">Edit</button>

<!-- Show if user has ANY of these -->
<div *ngxHasPermission="['admin', 'editor']">Admin Tools</div>

✅ Role Directive: *ngxHasRole

<div *ngxHasRole="'admin'">Welcome, Admin</div>

---

🔐 Permission Guard

Protect routes by permission:

import { permissionGuard } from 'ngx-smart-permissions';

{
  path: 'admin',
  canActivate: [permissionGuard],
  data: {
    permission: 'access-admin'
  }
}

---

🔄 Set Permissions (e.g. after login)

In your AuthService or login component:

const permissions = ['view-dashboard', 'edit-user'];
const role = 'admin';
const isSuperAdmin = role === 'admin';

permissionService.switchPermissions(permissions, isSuperAdmin, role);

---

🚫 Access Denied Page

Use redirectTo in provideNgxSmartPermissions() to control redirection for unauthorized access.

provideNgxSmartPermissions({ redirectTo: '/unauthorized' });

---

🧪 Testing

Basic unit tests are recommended for your permission logic.
You can spy on PermissionService methods for behavior tests.

---

📁 File Structure

src/
└── lib/
    ├── directives/
    │   ├── has-permission.directive.ts
    │   └── has-role.directive.ts
    ├── guards/
    │   └── permission.guard.ts
    ├── permission/
    │   ├── permission.service.ts
    │   ├── permission.config.ts
    │   └── permissions.providers.ts
    ├── ngx-smart-permissions.module.ts
    └── public-api.ts

---

✅ Compatibility

• ✅ Angular 17 & 18
• ✅ Supports both NgModules & Standalone Components
• ✅ Fully tree-shakable & side-effect free

---

🌐 Live Demo

Check out the live demo on GitHub:
👉 ngx-smart-permissions Demo App

---

📄 License

MIT © Rami Shaikha