open-index/open-npm huggingface dataset:
npm package: @pantherpdf/cloud-editor-angular
Description: [PantherPDF](https://www.pantherpdf.com/) is a *report editor* and *PDF generator* service for creating customized PDF reports.
Latest version: 1.0.0-beta.1

# PantherPDF Cloud Editor *Angular* component

[PantherPDF](https://www.pantherpdf.com/) is a *report editor* and *PDF
generator* service for creating customized PDF reports.

This package is a **thin wrapper** around a cloud based editor for simplified
integration into Angular apps.
There is also a [React](https://www.npmjs.com/package/@pantherpdf/cloud-editor-react)
and [Vue](https://www.npmjs.com/package/@pantherpdf/cloud-editor-vue) wrapper.

Underlying editor is open source and available [here](https://www.npmjs.com/package/pantherpdf).

## Installation
```bash
npm install --save @pantherpdf/cloud-editor-angular
```

## Example using `reportSecret`:
Report data is stored on PantherPDF database.

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PantherpdfCloudEditorComponent } from '@pantherpdf/cloud-editor-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    PantherpdfCloudEditorComponent,
    CommonModule,
  ],
  template: `
    <pantherpdf-cloud-editor
      [reportSecret]="reportSecret"
    >
    </pantherpdf-cloud-editor>
  `,
  styles: [
    ':host pantherpdf-cloud-editor ::ng-deep iframe { width: 100%; height: 100vh; }'
  ],
})
export class AppComponent {
  reportSecret = '...';
}
```

## Example using `value`:
Report data is stored on customer's database.

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PantherpdfCloudEditorComponent, ReportCloudData } from '@pantherpdf/cloud-editor-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    PantherpdfCloudEditorComponent,
    CommonModule,
  ],
  template: `
    <pantherpdf-cloud-editor
      [(value)]="reportValue"
      [editorKey]="editorKey"
    >
    </pantherpdf-cloud-editor>
  `,
  styles: [
    ':host pantherpdf-cloud-editor ::ng-deep iframe { width: 100%; height: 100vh; }'
  ],
})
export class AppComponent {
  editorKey: string;
  reportValue: ReportCloudData | null;

  constructor() {
    this.editorKey = '...';
    this.reportValue = null;
  }
}
```

## Props

| Parameter        | Description                                               |
|------------------|-----------------------------------------------------------|
| `[reportSecret]` | Access token for a report.                                |
| `[editorKey]`    | Access token for editor.                                  |
| `[lang]`         | Editor language. Possible values: `en` (default, uses metric units) and `en-us` which uses imperial units. |
| `[(value)]`      | `ReportCloudData` from customer's database.               |

# License
MIT