# 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FaRb9mlgn46e3P0JrbnS2%2FDemo%202024-10-31%2014-39-50.png?alt=media&#x26;token=c908cb56-3eaa-4cb2-be86-4ea3308d35c7" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FUssottrYuHJsjLq0tmeK%2FDemo%202024-10-31%2014-56-20.png?alt=media&#x26;token=495ee14c-f11a-4163-ae1c-1c2c159f5904" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fj7XB2K19jIm8FhmHTOPh%2FDemo%202024-10-31%2014-59-04.png?alt=media&#x26;token=7b13d58c-43cd-4310-a7de-c61b1122f05c" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FBjQjsuay57NGdDAMqVuj%2FDemo%202024-10-31%2015-51-31.png?alt=media&#x26;token=1e537c1f-7ae1-429a-a85a-7468b30ba997" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FYywpXWd5YElBhbLTNdDF%2FDemo%202024-10-31%2015-54-16.png?alt=media&#x26;token=fd3a7483-ce34-48e9-8d65-54d563585f40" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FVjQ3ENjkrEG4wNP671ao%2FDemo%202024-10-31%2015-56-05.png?alt=media&#x26;token=986daa08-fc30-48b8-9d3d-f67fd5cf8a93" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Frs42LzTnnz7YWeCnJhxR%2FDemo%202024-10-31%2015-57-54.png?alt=media&#x26;token=2fb03cf3-501c-4e20-9b6e-bb0e44ae9823" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FX8unSsOzMid7vcOTbkpR%2FDemo%202024-10-31%2016-00-18.png?alt=media&#x26;token=a5996a6f-9bf5-45ea-978c-baba793f78b1" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F6GxMrNOfphuUDY2cd9Bf%2FDemo%202024-10-31%2016-02-03.png?alt=media&#x26;token=2cf1c31f-f729-40f7-95cf-5f55a330c945" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FqXp9uvJLLUcgl1EJwUi3%2FDemo%202024-11-01%2008-39-00.png?alt=media&#x26;token=75750393-0c98-43aa-9908-518db959d551" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F8u0T0lWQYtZk6S0p3YVl%2FDemo%202024-11-01%2008-44-51.png?alt=media&#x26;token=1a71684d-4057-49db-a4cb-c059030d4bb7" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F8u0T0lWQYtZk6S0p3YVl%2FDemo%202024-11-01%2008-44-51.png?alt=media&#x26;token=1a71684d-4057-49db-a4cb-c059030d4bb7" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F0J3JPsm2TJKlBSIQMvbR%2FDemo%202024-11-01%2008-49-10.png?alt=media&#x26;token=5556d343-f812-4bbc-a8d7-b5b374edeee6" 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="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FiPHLJucj4NPRzPHycqKI%2FDemo%202024-11-01%2008-51-27.png?alt=media&#x26;token=620295d4-2696-4a98-9a3c-6a2161c7d69e" 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>