# 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);
    } 
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kycdocv2.faceki.com/web-sdk/angular.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.