Last updated:
In the same way as embedding is completed for conventional web pages, embedding the Formcentric client in Angular also involves including the necessary JavaScript files.
Typically, the general approach to embedding described in the article General embedding can also be used in single-page applications. However, the embedding steps described below are recommended: these ensure a faster loading time for resources and a greater degree of freedom for developers.
To complete this step, navigate to your project’s root directory and execute the following command with your preferred package manager:
You should now have a local install of the Formcentric client in your node_modules directory.
To provide global access to the library resources in Angular, add these to your angular.json configuration:
As in General embedding, the next step is to create a form container in your target component – but an Angular template is used in this scenario instead of HTML.
Create a new component in Angular :
In the component directory created, all files should now have been created by the Angular CLI:
formcentric.component.tsformcentric.component.spec.tsformcentric.component.htmlformcentric.component.scssYou can now modify the files for using the Formcentric client. For a dynamically configurable Formcentric component, this could therefore be created as follows:
formcentric.component.ts
formcentric.component.html
As with the client scripts, theme resources can be integrated directly into the application as SCSS and JavaScript.
Please note that the application should be configured so that it can use SCSS. Following this step, you can import the styles for your selected theme into the application as SCSS files. This means you can avoid having to inject CSS variables. You can then import both the variables and the theme itself into the previously generated formcentric.component.scss file:
By creating the component with the Angular CLI, the file should already be entered as a dependency in formcentric.component.ts under styleUrls (see section Formcentric Angular component).
You can now add the imported SCSS files and the Formcentric JavaScript templates script.js in your angular.json. To ensure the pre-processing of the Formcentric theme, check to confirm that formcentric.component.scss is entered under styles and node_module under includePaths:
formcentric.component.html
