Skip to main content

Use Third-party Library Components

Integrating third-party libraries into web applications is essential in contemporary software development, enabling the integration of specialized features and improving overall performance. The following sections illustrates a methodical process for integrating the ngx-slider library, an external Angular component, within an established application framework.

Edit Module and Add Package​

  1. Open the module you want to configure and switch to the "Additional Dependencies" tab.
  2. Click on "Add Package" and enter the package name. In our current context, it's "ngx-slider-v2".
  3. Specify the version and save the changes.

Edit Module and Add Package

Configure Master Layout​

  1. Locate the Master Layout within the Experience and double-click a master layout to open it.
  2. In the properties panel, under Module Configuration, click "New" to add a new module.
  3. Enter the third-party module name under "Name" and the package name under "Path" (imported during Edit Module step).

Configure Master Layout

Utilize in Interface​

  1. Open the Interface where you want to utilize the ngx-slider from the Explorer Menu.
  2. Under Parent Layout in the properties pane, select the Master Layout configured in the previous step.

Utilize in Interface

Configure External Types​

Configure External Types​

  1. Navigate to Experience > Interfaces and open the Interface properties pane.
  2. Under External Types Configuration, click "New" to create a new type (class or function) referenced via the third-party package.
  3. Provide a name, select the type (class or function), and specify the package name under "Path". Save the changes.

Configure External Types

Add Model Property​

Create Model Property​

  1. Navigate to the Model folder in the explorer menu and create a new model property.
  2. Enter a name for the model property and select the external type created in the previous step under the Type dropdown.
  3. Save the model property.

Add Model Property

Use ngx-slider in the Interface​

Add HTML Snippet Widget​

  1. Drag and Drop the HTML Snippet widget on the designer canvas of your interface.
  2. Click on the edit icon to configure the widget.
  3. In the properties pane, under Basic Configuration, edit the HTML binding and add slider properties such as SelValue and SliderOptions (model properties created previously for ngx-slider).

ngx-slider in Interface