# Angular

## Installation

You can install the `@faceki/angular-kyc-sdk` package using npm or yarn:

```
npm install @faceki/angular-kyc-sdk
# or
yarn add @faceki/angular-kyc-sdk
```

### Getting Started

#### Import the Module

Import the `FacekiKycModule` into your Angular application module:

```
import { FacekiKycModule } from '@faceki/angular-kyc-sdk';

@NgModule({
  imports: [FacekiKycModule],
  // ...
})
export class YourAppModule { }
```

#### Set Configuration

Provide your KYC service configuration in your Angular app, typically in the providers array of your module. For example:

```
import { FacekiKycService } from '@faceki/angular-kyc-sdk';

@NgModule({
  // ...
  providers: [
    {
      provide: FacekiKycService,
      useValue: {
        clientId: 'your-client-id',
        clientSecret: 'your-client-secret'
      },
    },
  ],
})
export class YourAppModule { }
```

#### Add Bootstrap in index.html

```
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

```

#### Link Assets

Add this to your `angular.json` inside `projects -> architect -> build -> assets`

```

   {
     "glob": "**/*",
     "input": "node_modules/@faceki/angular-kyc-sdk/assets",
     "output": "assets/"
   }


```

#### Use the Component

In your Angular component template, use the `<lib-faceki-kyc></lib-faceki-kyc>` custom element to integrate KYC functionality into your application:

```
<lib-faceki-kyc></lib-faceki-kyc>
```

#### Handle KYC Responses & Text Controls

Implement success and failure callbacks to handle KYC responses within your component, as demonstrated in the provided code examples:

```
// Your component class
import { FacekiKycService,MultiDocumentKYCResponseClass, SingleDocumentKYCResponseClass } from '@faceki/angular-kyc-sdk';

@Component({
  // ...
})
export class YourComponent {
  constructor(private facekiConfig: FacekiKycService) {
    this.facekiConfig.onSuccess = this.onSuccessCallback;
    this.facekiConfig.onFail = this.onFailCallback;
    this.facekiConfig.failureText = "Verification Failed";
    this.facekiConfig.successText = "Verification Successful";
    this.facekiConfig.loadingText = "Verification In Progress";
  }

  onSuccessCallback(response:SingleDocumentKYCResponseClass | MultiDocumentKYCResponseClass) {

    if (response instanceof SingleDocumentKYCResponseClass) {
      console.log('SingleDocumentKYCResponse:');
    } else if (response instanceof MultiDocumentKYCResponseClass) {
      console.log('MultiDocumentKYCResponse:', response);
    } 
  }
  onFailCallback(response:SingleDocumentKYCResponseClass | MultiDocumentKYCResponseClass) {

    if (response instanceof SingleDocumentKYCResponseClass) {
      console.log('SingleDocumentKYCResponse:');
    } else if (response instanceof MultiDocumentKYCResponseClass) {
      console.log('MultiDocumentKYCResponse:', response);
    } 
  }
}
```