Setup

Welcome to the PCP Interfaces usage documentation! This guide will walk you through the process of integrating PCP components into your application quickly and effectively.

Getting Started

To begin, install the @celerofinancas/pcp-client-ui package in your project using your preferred package manager:

npm install @celerofinancas/pcp-client-ui

Or:

yarn add @celerofinancas/pcp-client-ui

Prerequisites

Ensure your development environment meets the following requirements:

• Node.js: Version 18.0 or higher
• Angular: Version 17.x

Using PCP Components

Step 1: Configure the PCP Module

To start using PCP components, add the PCP module to your Angular application. You'll need to provide configuration for environments and company identity:

• Follow the guide to set up environments.
• Set up your company identity.

Here’s an example configuration for your AppModule:

@NgModule({
  declarations: [AppComponent],
  imports: [
    PcpClientUiModule.forRoot(environment, CompanyIdentityService),
  ],
  providers: [
    { provide: ENVIRONMENTS_CONFIGURATION, useValue: environment },
    { provide: COMPANY_IDENTITY_SERVICE, useClass: CompanyIdentityService },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 2: Add Components to Your Application

You can add PCP components in one of two ways:

Option 1: Standalone Component

Integrate a standalone PCP component directly into your component:

import { PcpSecondaryCardsComponent } from '@celerofinancas/pcp-client-ui';

@Component({
  selector: 'example-component',
  template: `
    <pcp-secondary-cards />
  `,
  standalone: true,
  imports: [PcpSecondaryCardsComponent],
})
export class ExampleComponent {}

Option 2: Module-Based Integration

Add the PCP component to a module, making it available for use across multiple components:

import { PcpSecondaryCardsComponent } from '@celerofinancas/pcp-client-ui';

@NgModule({
  imports: [
    PcpSecondaryCardsComponent,
  ],
})
export class ExampleModule {}

With these steps completed, your application is now ready to leverage the powerful features of the PCP interface components!

---