---
Added: v2.0.0
Status: Active
---
# Node Permission directive

Selectively disables an HTML element or Angular component

## Basic Usage

### Properties

| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| permission | `string` | `null` | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
| nodes | `MinimalNodeEntity[]` | `[]` | Nodes to check permission for.  |

## Details

The `NodePermissionDirective` allows you to disable an HTML element or Angular component
by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission.

The decorated element will be disabled if:

-   there are no nodes in the collection
-   at least one of the nodes has no expected permission

### HTML element example

The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button.

For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection.

```html
<adf-toolbar title="toolbar example">
    <button mat-icon-button
            adf-node-permission="delete"
            [adf-nodes]="documentList.selection">
        <mat-icon>delete</mat-icon>
    </button>
</adf-toolbar>

<adf-document-list #documentList ...>
 ...
</adf-document-list>
```

The button will become disabled by default, and is going to change its state once user selects/unselects one or multiple documents that current user has permission to delete.

### Angular component example

You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element.

```html
<alfresco-upload-drag-area
        [parentId]="..."
        [versioning]="..."
        [adf-node-permission]="'create'"
        [adf-nodes]="getCurrentDocumentListNode()">
 ...
</alfresco-upload-drag-area>
```

When designing a component you want to work this directive with, you have two important things to care about.

### Implementing the NodePermissionSubject interface

The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive.

```js
import { NodePermissionSubject } from '@alfresco/adf-core';

@Component({...})
export class UploadDragAreaComponent implements NodePermissionSubject {
    public disabled: boolean = false;
}
```

### Defining your components as an EXTENDIBLE_COMPONENT parent component

The directive will look up the component in the dependency injection tree, up to the @Host() component.

> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"

-   because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
-   because of the emphasized second sentence you have to provide your component as a viewProvider.

```js
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';

@Component({
    ...
    viewProviders: [
        { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
    ]
})
export class UploadDragAreaComponent implements NodePermissionSubject { ... }
```

**Notice the usage of viewProviders (instead of providers)! This part is very important, especially if you want to use this directive on a transcluded component!**