# ng-can

> A simple package to handle Angular UI availabilities and permissions

Latest version **1.0.5** (published 2019-02-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng-can
pnpm add ng-can
yarn add ng-can
bun add ng-can
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-02-12 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 100.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Aleksandr Poltoratskiy |
| Maintainers | alexcyber, myownsumm |
| Keywords | rbac, angular, access control, permissions, conditions, hide element, show element |

## Links

- npm: https://www.npmjs.com/package/ng-can
- Repository: https://github.com/myownsumm/ng-can
- Homepage: https://github.com/myownsumm/ng-can#readme
- Issues: https://github.com/myownsumm/ng-can/issues
- npm.io page: https://npm.io/package/ng-can

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-02-12
- 1.0.4 — 2019-02-11
- 1.0.3 — 2019-02-08
- 1.0.2 — 2019-02-06
- 1.0.1 — 2019-02-06
- 1.0.0 — 2019-02-04

## README

# NgCan
Library for simple access control depending on permissions / conditions.
<p>Build and tested with Angular v7.2.</p>

## How to use

Your module:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgCanModule } from 'ng-can';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgCanModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
}


```

Html template:
```typescript
...
<div ng-can [conditions]="{'can_edit': true}"
      [permissions]="permissions"
      [strictMode]="true">
</div>
...
```

Component:
```typescript
...
protected permissions = {'can_edit': true, 'can_delete': false};
...
```

Library Will check if conditions `{'can_edit': true}` are met to permissions `{'can_edit': false, 'can_delete': false}`. DIV will be allowed to use.

##Strict mode
`strictMode` enables the check for non existing permissions and won't allow to use Element in case of missing it:
```typescript
...
<div ng-can [conditions]="{'can_modify': true}"
      [permissions]="permissions"
      [strictMode]="true">
</div>
...
```

Component:
```typescript
...
protected permissions = {'can_edit': true, 'can_delete': false};
...
```
DIV won't be allowed to use.

## Module Options
Set you default Hide Approach from Module Options initializing:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgCanModule } from '../../projects/ng-can/src/lib/ng-can.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgCanModule.forChild({
      hide_approach: 'visibility'
    })
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
}
```

Available Hide Approaches are: 'visibility' and 'hidden'. *Hidden* approach will use native HTML [hidden] property hiding the patient and making space free of Element on the page. 
*Visibility* will only hide Element with no influence on your layout.  
You can overwrite default Hide Approach by passing property parameter inside the directive:  
```angular2html
  <li ng-can [conditions]="{'can_edit': true}"
      [permissions]="permissions"
      [hideApproach]="'hidden'"
      [strictMode]="true">
    <h2>
      <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Hidden</a>
    </h2>
  </li>
```

---
_Source: https://npm.io/package/ng-can · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._