angular-permission-patterns

Name: angular-permission-patterns
Availability: InStock
Author: shakesoft

Implements permission-based UI rendering patterns for ASP.NET Zero Angular applications.

Updated May 22, 2026

Search Tags:#typescript #authorization #angular #permissions #pipes #conditional rendering #aspnet zero

Ready to run

npx skills add https://github.com/shakesoft/timekeeper --skill angular-permission-patterns-shakesoft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-permission-patterns
Source: https://github.com/shakesoft/timekeeper/tree/main/.cursor/skills/angular-permission-patterns
Command: npx skills add https://github.com/shakesoft/timekeeper --skill angular-permission-patterns-shakesoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building ASP.NET Zero Angular frontends must consistently hide or show buttons, menu items, and table columns based on user permissions, and inconsistent checks lead to security gaps and duplicated logic. ## Core Features & Use Cases - Template Permission Pipes: Guard UI elements with PermissionPipe for single checks and PermissionAnyPipe for multi-permission checks. - TypeScript Permission Checks: Conditionally build action menus using permission.isGranted for Edit and Delete operations. - Permission String Mapping: Align Angular permission strings with AppPermissions.cs constants on the backend. - Use Case: When building a Products management page, guard the Create button with 'Pages.Products.Create', hide the Actions column unless Edit or Delete is granted, and keep strings synchronized with the C# permission definitions. ## Quick Start Ask the AI to add permission checks to an Angular component so the create button, edit action, and delete action only render for users with the matching Pages permissions.

Frequently Asked Questions about angular-permission-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I conditionally show a button based on permissions in Angular?▼

Use the PermissionPipe in an @if block, for example @if ('Pages.Products.Create' | permission) around the button element. Import PermissionPipe from @shared/common/pipes/permission.pipe and add it to the component's imports array.

How to check multiple permissions at once in an Angular template?▼

Use the PermissionAnyPipe with an array of permission strings, such as ['Pages.Products.Edit', 'Pages.Products.Delete'] | permissionAny. The element renders when the user holds at least one of the listed permissions, which suits shared Actions columns.

How do I check permissions in TypeScript code instead of templates?▼

Call this.permission.isGranted('Pages.Products.Edit') inside component methods to conditionally build menu items or trigger logic. This pattern is used for dynamic action menus where each item depends on a separate permission.

Why is my Angular permission check not hiding the element?▼

The permission string must exactly match the value defined in AppPermissions.cs, such as 'Pages.Products.Create'. Also verify that PermissionPipe or PermissionAnyPipe is imported in the component, since missing imports silently break the check.

Can I hide navigation menu items based on permissions?▼

Yes, call this._permissionService.isGranted('Pages.Products') in the navigation service before pushing the MenuItem. Only users granted that permission will see the corresponding entry in the application menu.