skills.rest
shakesoft
shakesoftCOMMUNITY
Explore all skills by this author →
GitHub

angular-permission-patterns

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
One-click install
npx skills add https://github.com/shakesoft/timekeeper --skill angular-permission-patterns-shakesoft
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
fpindejfpindej
230

add-permission

Add permission constants to C# and TypeScript files for authorization rules.

Community
Intermediate
CriezzzCriezzz

menu-navigation-flow

Manage Unity UI navigation with stack-based push, pop, and modal operations.

Community
Intermediate
MythologIQMythologIQ

security-permission-audit

Audit security and permissions for Tauri commands in Hearthlink applications.

Community
Intermediate
AgentientAgentient
2

firebase-admin-sdk-server-integration

Initialize Firebase Admin SDK server-side in Next.js 14+ apps.

Official
Advanced