File

packages/components/directives/eui-has-permission.directive.ts

Description

Structural directive conditionally rendering content based on user permissions. Checks permissions via EuiPermissionService and shows/hides content accordingly. Supports single or multiple permission checks with AND/OR logical operators. Similar to *ngIf but permission-based instead of boolean-based.

Single permission:

<button *euiHasPermission="['EDIT_USER']">Edit</button>

Multiple permissions (AND - all required):

<div *euiHasPermission="['READ_DATA', 'WRITE_DATA']">
  Admin content
</div>

Multiple permissions (OR - any required):

<div *euiHasPermission="['MANAGER', 'ADMIN']" euiHasPermissionOperator="OR">
  Manager or Admin content
</div>

Accessibility

• Content completely removed from DOM when permissions not granted
• No visual indication of hidden content to unauthorized users
• Screen readers will not encounter permission-restricted content

Notes

• Default operator is AND (all permissions required)
• Use OR operator when any single permission should grant access
• Requires EuiPermissionService to be configured in application
• Permission checks happen synchronously on directive initialization and input changes