Question Angular template: Is there any function available to check if user has permission

[thiag0coelho]

Angular template v2.0.1

I need to hide or disable components, I need something to check policies and act like so:

<div disabled="hasPermission('Permission:PropostaAlterarComissao')">
...
</div>
<div *ngIf="hasPermission('Permission:PropostaAlterarComissao')">

</div>

Is there any way to do this, using directive, service, something?

[ismcagdas]

@thiag0coelho do you mean permissions ?

[hikalkan]

Yes, there is such a feature. See its usage: https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html#L9

[hikalkan]

@mehmet-erim can you write for different use cases?

[thiag0coelho]

@hikalkan That worked for hiding. Thanks!
It'll be nice if there's anything to disable components also. :)

[mehmet-erim]

You can use the PermissionDirective to manage the permission of a DOM element. It can be used in two ways.

Attiribute usage:

<button abpPermission="Type here a policy key e.g: AbpIdentity.Users.Create">Create a new user</button>

Structural usage:

<button *abpPermission="'Type here a policy key'">Create a new user</button>

You should use the structural usage when you would like to hide a component.

You can also manage the permission of a route with PermissinGuard:

import { PermissionGuard } from '@abp/ng.core';
// ...
{
  path: 'your-route-path',
  component: YourComponent
  canActivate: [PermissionGuard],
  data: {
    routes: {
      requiredPolicy: 'Type here a policy key',
    },
  },
}

To disable a DOM element

Add a select decorator to your component as shown below:

import { ConfigState } from '@abp/ng.core';
import { Select } from '@ngxs/store';
// ...
export class YourComponent {
  @Select(ConfigState.getGrantedPolicy('Type here a policy key'))
  createButtonPermission$: Observable<boolean>
// ...

Use disabled attiribute on a DOM element like this:

<button [disabled]="!(createButtonPermission$ | async)">Create new</button>

[luisp88]

@mehmet-erim Is there a way to use OR/AND within *abpPermission? Thats because I have a "more actions" menu button that shows edit and delete buttons, and want to hide the menu button if cannot edit and delete

[mehmet-erim]

@luisp88 You can use permission directive like this:

*abpPermission="'YourModule.Edit || YourModule.Delete'"

or

*abpPermission="'YourModule.Edit && YourModule.Delete'"

For further information, see the permission management documentation

You can also get permissions manually via getGrantedPolicy selector of ConfigState. See https://docs.abp.io/en/abp/latest/UI/Angular/Config-State#how-to-get-a-specific-permission-from-the-store