## Entitlements quickstart

Harness the power of Frontegg's robust Entitlements Engine directly into the heart of your React application, allowing you to effortlessly implement sophisticated, role-based, and attribute-based access controls with just a few lines of code.

br
Prerequisites
@frontegg/angular@6.17.0

br
To enable entitlements by configuration, add the following code within your `app.module.ts` file:

### Configuring Entitlements on Angular

See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) for more information.


```typescript
import { NgModule } from '@angular/core';
import { FronteggAppModule } from '@frontegg/angular';
@NgModule({
   imports: [
      //... ,
      FronteggAppModule.forRoot({
         contextOptions: {
            baseUrl: //... ,
               clientId: //...
         },
         entitlementsOptions: {
            enabled: true
         }
      }, ),
   ],
   //...
})
```

See [`entitlementsOptions`](/ciam/sdks/components/fronteggappoptions#entitlementsOptions) for more information.

br
Entitlements functions
An exception will be thrown if you don’t enable entitlements and try to use the functions..

br
### Angular functions

To use Entitlement-functions you have to use `FronteggEntitlementsService`.

The service exposes four functions, which should be called only for authenticated users.:

br
- `featureEntitlements$` - to get a subscription to check if the user is entitled to a feature
- `permissionEntitlements$` - to get a subscription to  check if the user is entitled to permission
- `entitlements$` - to get a subscription to  check if the user is entitled to a feature or permission
- `loadEntitlements` - load entitlements on demand


br

```typescript
import {
    Component,
    NgZone,
    OnInit,
    OnDestroy
} from '@angular/core';
import {
    Subscription
} from 'rxjs';
import {
    FronteggAppService,
    FronteggEntitlementsService
} from '@frontegg/angular';
import {
    Entitlement
} from '@frontegg/types';
import {
    Entitlement,
    CustomAttributes
} from '@frontegg/types';
@Component({
    selector: 'entitlements',
    templateUrl: './entitlements.component.html'
})
export class EntitlementsComponent implements OnInit, OnDestroy {
    feature1EntitlementsSubscription: Subscription;
    permission1EntitlementsSubscription: Subscription;
    feature2EntitlementsSubscription: Subscription;
    permission2EntitlementsSubscription: Subscription;
    feature1EntResult: Entitlement | undefined;
    permission1EntResult: Entitlement | undefined;
    feature2EntResult: Entitlement | undefined;
    permission2EntResult: Entitlement | undefined;
    loadingSubscription: Subscription;
    isLoading = true;
    authenticated = false;
    constructor(private fronteggAppService: FronteggAppService, private fronteggEntitlementsService: FronteggEntitlementsService, private ngZone: NgZone) {
        this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => {
            this.isLoading = isLoading;
        });
        this.fronteggAppService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
            this.authenticated = isAuthenticated;
        });
        this.feature1EntitlementsSubscription = this.fronteggEntitlementsService.featureEntitlements$('feature1', {
            next: (result: Entitlement) => {
                this.ngZone.run(() => {
                    this.feature1EntResult = result;
                });
            }
        });
        this.permission1EntitlementsSubscription = this.fronteggEntitlementsService.permissionEntitlements$('permission1', {
            next: (result: Entitlement) => {
                this.ngZone.run(() => {
                    this.permission1EntResult = result;
                });
            }
        });
        this.feature2EntitlementsSubscription = this.fronteggEntitlementsService.entitlements$({
            featureKey: 'feature2'
        }, {
            next: (result: Entitlement) => {
                this.ngZone.run(() => {
                    this.feature2EntResult = result;
                });
            }
        });
        this.permission2EntitlementsSubscription = this.fronteggEntitlementsService.entitlements$({
            permissionKey: 'permission2'
        }, {
            next: (result: Entitlement) => {
                this.ngZone.run(() => {
                    this.permission2EntResult = result;
                });
            }
        });
    }
    ngOnDestroy(): void {
        //...
        this.feature1EntitlementsSubscription.unsubscribe();
        this.feature2EntitlementsSubscription.unsubscribe();
        this.permission2EntitlementsSubscription.unsubscribe();
    }
}
```


```typescript
<div *ngIf="!isLoading">
    <section *ngIf="authenticated">
        <div *ngIf="feature1EntResult?.isEntitled">A cool section</div>
        <div *ngIf="permission1EntResult?.isEntitled">An awesome section</div>
        <div *ngIf="feature2EntResult?.isEntitled">A mind-blowing section</div>
        <div *ngIf="permission2EntResult?.isEntitled">Another section</div>
    </section>
</div>
```

br
Justification `NotEntitledJustification` can be one of the following enums (when `isEntitled` is `false`):


```typescript
export enum NotEntitledJustification {
  MISSING_PERMISSION = 'MISSING_PERMISSION',
  MISSING_FEATURE = 'MISSING_FEATURE',
  BUNDLE_EXPIRED = 'BUNDLE_EXPIRED',
}
```

br
### Custom attributes

Frontegg allows you to **create custom attributes** for users (learn more about creating [custom attributes](/ciam/guides/authorization/entitlements/feature-based/feature-flags#attributes-for-targeting)). Attributes can be used for [Feature Flagging](/ciam/guides/authorization/entitlements/feature-based/feature-flags) purposes and in Entitlement API calls within a `customAttributes` object. The `customAttributes` object is optional and comprised of key-value pairs with possible values of  `string | number | boolean | Date`, like so:

br

```typescript
this.fronteggEntitlementsService.featureEntitlements$('feature-x', {
   next: (result: Entitlement) => {
      this.ngZone.run(() => {
         this.feature1EntResult = result;
      });
   }
}, {
   attr1: 'val1',
   attr2: 'val2'
});
```

br

```typescript
featureEntitlements$(feature: string, observer: PartialObserver<Entitlement>, customAttributes?:CustomAttributes) => Subscription

permissionEntitlements$(permission: string, observer: PartialObserver<Entitlement>, customAttributes?:CustomAttributes) => Subscription

entitlements$(options: EntitledToOptions, observer: PartialObserver<Entitlement>, customAttributes?:CustomAttributes) => Subscription
```

### Load on demand

You can also load entitlements on demand by using `loadEntitlements` function:


```typescript
import {
    Component,
    OnDestroy,
    OnInit
} from '@angular/core';
import {
    FronteggAppService,
    FronteggEntitlementsService
} from '@frontegg/angular';
import {
    Subscription
} from 'rxjs';
@Component({
    selector: 'entitlements',
    templateUrl: './entitlements.component.html'
})
export class EntitlementsComponent implements OnInit, OnDestroy {
    loadingSubscription: Subscription;
    isLoading = true;
    authenticated = false;
    constructor(private fronteggAppService: FronteggAppService, private fronteggEntitlementsService: FronteggEntitlementsService) {
        this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => {
            this.isLoading = isLoading;
        });
        this.fronteggAppService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
            this.authenticated = isAuthenticated;
        });
        // ...
    }
    onLoadEntitlementsClicked() {
        this.fronteggEntitlementsService.loadEntitlements();
    }
}
```


```typescript
<div *ngIf="!isLoading">
    <section *ngIf="authenticated">
        <div class="entitlements-button-container">
            <button (click)="onLoadEntitlementsClicked()">
                Load entitlements
            </button>
        </div>
    </section>
</div>
```

br
You can pass a callback to let you know that the request was completed:

br

```typescript
onLoadEntitlementsWithCallbackClicked() {
    this.fronteggEntitlementsService.loadEntitlements(
        (isSucceeded: boolean) => console.log('load entitlements', isSucceeded ? 'succeeded' : 'failed'));
}
```