> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encorekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

> Integrate the Encore Web SDK in an Angular app: a root-provided service that wraps configure()/identify()/show(), initialized once at startup.

The SDK is framework-agnostic — in Angular, wrap it in a root-provided service so
configuration happens once and components stay free of SDK plumbing.

## Install

```bash theme={null}
npm install @encorekit/web-sdk
```

## A root-provided service

```typescript theme={null}
// encore.service.ts
import { Injectable } from '@angular/core';
import Encore from '@encorekit/web-sdk';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class EncoreService {
  constructor() {
    Encore.configure({ apiKey: environment.encoreApiKey });
  }

  identify(userId: string): void {
    Encore.identify(userId); // replaces the auto-generated anonymous UUID
  }

  show(placementId) {
    return Encore.placement(placementId).show(); // never rejects — branch on result.status
  }
}
```

Full configuration options: [`configure()`](/publishers/web/sdk-reference/configure).

## Present offers from a component

```typescript theme={null}
export class CancelComponent {
  constructor(private encore: EncoreService) {}

  async onCancelClicked() {
    const result = await this.encore.show('cancel_flow');
    if (result.status !== 'claimed') {
      this.proceedWithCancellation(); // 'dismissed' or 'unavailable' — continue your flow
    }
  }
}
```

## Next steps

* [Redemption Modes](/publishers/web/guides/redemption-modes) — deferred vs immediate claim flows
* [Thank-You Layout](/publishers/web/guides/thank-you-layout) — post-purchase placements
* [`show()`](/publishers/web/sdk-reference/show) — the full `ShowResult` contract