# Angular component

## Availability

* \[SINCE Orbeon Forms 2022.1.6, 2023.1.1]
* This is an [Orbeon Forms PE](https://www.orbeon.com/download) feature.
* The Angular component is available from [the npm package registry](https://www.npmjs.com/package/@orbeon/angular).

## Usage

The Orbeon Forms Angular component can be used in any Angular application. To use it, add `@orbeon/angular` to your dependencies, typically in your `package.json` file, like this:

```json
{
  "dependencies": {
    "@orbeon/angular": "^1.0.1"
  }
}
```

Usually, this is done via the command line:

```sh
npm install @orbeon/angular
```

The Orbeon Forms Angular component is based on the [JavaScript embedding API](/form-runner/link-embed/javascript-api.md), but you don't need to include it explicitly using a `<script>` tag. The Angular component will include it automatically.

The component is used as follows:

```tsx
<fr-form app="acme" form="order" mode="new" orbeonContext="http://localhost:8080/orbeon"></fr-form>
```

The properties have the same meaning as in the [JavaScript embedding API](/form-runner/link-embed/javascript-api.md):

| Parameter     | Optional                             | Type                                                                | Example                          | Description                                             |
| ------------- | ------------------------------------ | ------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- |
| orbeonContext | No                                   | String                                                              | `'http://localhost:8080/orbeon'` | Context where Orbeon Forms is deployed                  |
| app           | No                                   | String                                                              | `'human-resources'`              | App name                                                |
| form          | No                                   | String                                                              | `'job-application'`              | Form name                                               |
| mode          | No                                   | String                                                              | `'new'`                          | Either `'new'`, `'edit'`, or `'view'`                   |
| documentId    | Mandatory for modes other than `new` | String                                                              |                                  | For modes other than `'new'`, the document to be loaded |
| queryString   | Yes                                  | String                                                              | `"job=clerk"`                    | Additional query parameters                             |
| headers       | Yes                                  | [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) | `new Headers({ 'Foo': 'bar' })`  | Additional HTTP headers; see point 2 below              |

## Example

Here's a simple example in TypeScript where a form is selected by clicking on buttons and then embedded using the Orbeon Forms Angular component:

`app.component.ts`:

```tsx
import { Component } from '@angular/core';
import { FrFormComponent } from '@orbeon/angular';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [ FrFormComponent ],
    template: `
      <button (click)="loadForm('acme', 'form-1')">Form 1</button>
      <button (click)="loadForm('acme', 'form-2')">Form 2</button>
      <button (click)="loadForm('acme', 'form-3')">Form 3</button>
      <div style="margin-top: 10px;">
        <div>App: {{ app }}</div>
        <div>Form: {{ form }}</div>
      </div>
      <fr-form app="{{app}}" form="{{form}}" mode="new" orbeonContext="http://localhost:8080/orbeon"></fr-form>
    `
})

export class AppComponent {
    title = 'Orbeon Angular component test';

    app  : string = 'acme';
    form : string = 'form-1';

    loadForm(app: string, form: string): void {
        this.app  = app;
        this.form = form;
    }
}
```

`app.module.ts`:

```tsx
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ]
})

export class AppModule { }
```


---

# 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://doc.orbeon.com/form-runner/link-embed/angular-component.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.