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

# Angular Integration

> Complete guide for integrating PFM service with Angular applications

PFM Stack provides an Embedded Angular SDK that allows you to integrate a Personal Finance Management experience into your application with minimal effort. With just a few lines of code, you can enable users to aggregate all their financial data in one place using the Account Aggregator framework.

## Step-by-Step Integration

### STEP 1: Initialization of SDK API

When a consumer wants to open PFM, your backend service must trigger the initialization of SDK API.
Follow the [SDK Init API](/pfm/sdk-init-api) guide to integrate with the API in your backend server.

### STEP 2: Adding Angular SDK as dependency

Add the following dependency to your package.json. Run npm install or other to install the dependency. If you are using any other dependency management library, refer to that library documentation to add below npm package as dependency.

```json theme={null}
equal-angular-pfm-sdk: ^1.0.0
```

### Step 3: Launch PFM SDK

Once the SDK Init API is invoked and you have session\_token, the PFM SDK can be opened from client using the below procedure:

In AppComponent (Or any of your Angular Component) use the below snippet to launch Equal SDK.

```typescript theme={null}
import { Component, OnInit } from '@angular/core';
declare var PFMSDK: any;

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class MyComponent implements OnInit {
  private pfmInstance: any;

  token: string | null = null;
  constructor() {}
  ngOnInit() {}

  fetchToken() {
    fetch('https://<your_backend_api_that_calls_sdk_init_api_and_returns_token>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify('<API Body as per your API contracts>')
    })
    .then(response => response.json())
    .then(data => {
      this.token = data.token;
      this.pfmInstance = new PFMSDK(this.token, env);
    })
    .catch(error => console.error('Error fetching token:', error));
  }

  openPFM() {
    if (this.pfmInstance) {
      this.pfmInstance.openPFM(
        (error: any) => console.error('PFM SDK Error:', error),
        () => console.log('PFM SDK Closed')
      );
    } else {
      console.error('PFM SDK is not initialized!');
    }
  }
}
```

## Important Code for integration

```typescript theme={null}
// TO Initialize the SDK and get instance of it
pfmInstance = new PFMSDK(this.token, env);

// Launch SDK and handle onClose & onError callbacks.
pfmInstance.openPFM(
  (error: any) => console.error('PFM SDK Error:', error), // onError(error: any) - Invoked when any error occurs.
  (reason: string) => console.log('PFM SDK Closed') // onClose() - Invokes when SDK is closed by user.
);
```

## SDK Parameters

| Parameter | Mandatory/Optional | Description                                                                                                  |
| --------- | ------------------ | ------------------------------------------------------------------------------------------------------------ |
| token     | Mandatory          | Generated and shared in response from Step 1 - Response of SDK Init API                                      |
| env       | optional           | sandbox is Default. Pass "production" to point to production - Ensure this variable is environment specific. |

## SDK Callback Methods

The launchSDK method of PFMSDK accepts the following callbacks methods:

* **onError**: this is Invoked by SDK when
  * There are failures in opening the UI
  * Session Timeout.
* **onClosed**: Invoked when the SDK is closed by the user.