> For the complete documentation index, see [llms.txt](https://help.form.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.form.io/dev/enterprise-form-builder-module/application-integration/angular-applications/angular-component-reference.md).

# Angular Component Reference

The following components are available:

* [FormsComponent](#formscomponent)
* [FormBuild](#formbuildcomponent)[Component](#formbuildcomponent)
* [FormComponent](#formcomponent)
* [FormViewComponent](#formviewcomponent)
* [FormEditComponent](#formeditcomponent)
* [FormSettingsComponent](#formsettingscomponent)
* [FormChangesComponent](#formchangescomponent)
* [FormConflictComponent](#formconflictcomponent)
* [FormDeleteComponent](#formdeletecomponent)
* [FormSubmissionsComponent](#formsubmissionscomponent)
* [FormSubmissionComponent](#formsubmissioncomponent)
* [FormSubmissionViewComponent](#formsubmissionviewcomponent)
* [FormSubmissionEditComponent](#formsubmissioneditcomponent)
* [FormSubmissionDeleteComponent](#formsubmissiondeletecomponent)

## FormsComponent

This component provides the index for the forms.

<figure><img src="/files/3tqPUOwLomQ5k7cReAJJ" alt=""><figcaption><p>The FormsComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="131.50390625"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/forms.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/forms.component.ts</a></td></tr><tr><td>Template</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/forms.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/forms.component.html</a></td></tr></tbody></table>

## FormBuildComponent

This component is used to create new forms in your application.

<figure><img src="/files/GLFMmcPNMftBtib5Ayuf" alt=""><figcaption><p>The FormBuildComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="151.078125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/build</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/build/build.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/build/build.component.ts</a></td></tr><tr><td>Template</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/build/build.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/build/build.component.html</a></td></tr></tbody></table>

## FormComponent

The wrapper component for all child route components within the Form context. This provides the UI for the navigation to the "edit", "settings", etc for a specific form.

<figure><img src="/files/gymWNyc1xOGtHdUWotCW" alt=""><figcaption><p>FormComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="160.765625"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/form/form.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/form/form.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/form/form.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/form/form.component.html</a></td></tr></tbody></table>

## **FormViewComponent**

The component used to view (or use) a form.

<figure><img src="/files/t9gdPI0H0kL6wBfLd60f" alt=""><figcaption><p>FormViewComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="194.4140625"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/view</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/view/view.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/view/view.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/view/view.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/view/view.component.html</a></td></tr></tbody></table>

## FormEditComponent

The component used to edit a form providing the builder to edit the current Form JSON.

<figure><img src="/files/nev9j9JBAYYco2kXKj0i" alt=""><figcaption><p>FormEditComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="181.20703125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/edit</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/edit/edit.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/edit/edit.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/edit/edit.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/edit/edit.component.html</a></td></tr></tbody></table>

## FormSettingsComponent

Provides an interface to allow a user to modify the metadata for the current form in context such as the title, name, path, tags, etc.

<figure><img src="/files/0vpYm5u6rxaICDTPuyFz" alt=""><figcaption><p>FormSettingsComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="174.375"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/settings</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/settings/settings.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/settings/settings.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/settings/settings.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/settings/settings.component.html</a></td></tr></tbody></table>

## FormChangesComponent

The component shown to a user when a form has been changed and the user attempts to navigate away from the form context. It allows them to either cancel the navigation away, or cancel their form changes.

<figure><img src="/files/PNZx9syIhfR8YQUzo4jk" alt=""><figcaption><p>FormChangesComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="183.171875"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/changes</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/changes/changes.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/changes/changes.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/changes/changes.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/changes/changes.component.html</a></td></tr></tbody></table>

## FormConflictComponent

This component is shown to the user when a form conflict has been identified between the form being saved to the server and the form that already exists on the server (meaning that someone has saved the form before the user saved their version).

<figure><img src="/files/ctteAASOzoTdMFA8F1nl" alt=""><figcaption><p>FormConflictComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="192.64453125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/conflict</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/conflict/conflict.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/conflict/conflict.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/conflict/conflict.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/conflict/conflict.component.html</a></td></tr></tbody></table>

## FormDeleteComponent

The component used to ask the user if they wish to Delete the form, and if they confirm, performs the deletion of the form.

<figure><img src="/files/PUPVokbuCBYgjWQmp5Qp" alt=""><figcaption><p>FormDeleteComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="175.33203125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/delete</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/delete/delete.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/delete/delete.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/delete/delete.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/delete/delete.component.html</a></td></tr></tbody></table>

## FormSubmissionsComponent

Provides an index of the submissions for a provided form context

<figure><img src="/files/279RMz3a31DFzEtTGkHD" alt=""><figcaption><p>FormSubmissionsComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="164.05078125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/:formId/submission</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submissions/submissions.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submissions/submissions.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submissions/submissions.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submissions/submissions.component.html</a></td></tr></tbody></table>

## FormSubmissionComponent

The wrapper component for a Form Submission in context. Provides the navigation UI for the other child components such as view, edit, and delete.

<figure><img src="/files/xznNFvgmpy16bMr79UNq" alt=""><figcaption><p>FormSubmissionComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="170.8828125"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/form/:formId/submission/:submissionId</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submission/submission.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submission/submission.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submission/submission.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/submission/submission.component.html</a></td></tr></tbody></table>

## FormSubmissionViewComponent

The view component to view an existing submissions within a form.

<figure><img src="/files/xznNFvgmpy16bMr79UNq" alt=""><figcaption><p>FormSubmissionViewComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="169.4609375"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/form/:formId/submission/:submissionId</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/view/view.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/view/view.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/view/view.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/view/view.component.html</a></td></tr></tbody></table>

## FormSubmissionEditComponent

The component used to allow the user to edit an existing submission.

<figure><img src="/files/ygfrzmGSw2L5T3TsZspg" alt=""><figcaption><p>FormSubmissionEditComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="165.171875"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/form/:formId/submission/:submissionId/edit</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/edit/edit.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/edit/edit.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/edit/edit.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/edit/edit.component.html</a></td></tr></tbody></table>

## FormSubmissionDeleteComponent

The component that provides an interface to the user to ask them if they wish to delete a submission or not.

<figure><img src="/files/WFCfDDgXJaiaCgTvXaGO" alt=""><figcaption><p>FormSubmissionDeleteComponent UI</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="163.359375"></th><th></th></tr></thead><tbody><tr><td>Route</td><td>:host/form/:formId/submission/:submission/delete</td></tr><tr><td>Code</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/delete/delete.component.ts">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/delete/delete.component.ts</a></td></tr><tr><td>Template HTML</td><td><a href="https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/delete/delete.component.html">https://github.com/formio/enterprise-builder/blob/main/angular/src/projects/enterprise-builder/src/form/submissions/delete/delete.component.html</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.form.io/dev/enterprise-form-builder-module/application-integration/angular-applications/angular-component-reference.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.