NgxLcgNodular

This project is an Angular library generated with Angular CLI version 8.3.26.

Overview

ngx-lcg-nodular is an Angular library component designed to manage and display nodular structures with customizable APIs. It provides a user-friendly interface for managing rules and configurations.

Installation

To install this library, run:

npm install ngx-lcg-nodular

Usage

Using the Angular Library

To use the NgxLcgNodularModule in your Angular application, follow these steps:

1. Import the module into your application module:

import { NgxLcgNodularModule } from 'ngx-lcg-nodular';

@NgModule({
  declarations: [
    // other components
  ],
  imports: [
    NgxLcgNodularModule,
    // other modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the ngx-lcg-nodular component in your template and handle output events:

<ngx-lcg-nodular
  [uuid]="'your-uuid-here'"
  [autocomplete_api]="{
    url: 'https://api.example.com/v1/fields/values',
    headers: {
      'Secret-Key': 'your-secret-key'
    }
  }"
  [show_start_button]="true"
  [set_info]="infoData"
  [set_create]="createData"
  [set_update]="updateData"
  [set_get_fields]="getFieldsData"
  [set_get_anchors]="getAnchorsData"
  [set_get_history]="getHistoryData"
  [set_run_now_node]="runNowNodeData"
  [set_evaluate]="evaluateData"
  (on_get_info)="handleGetInfo($event)"
  (on_create)="handleCreate($event)"
  (on_update)="handleUpdate($event)"
  (on_get_fields)="handleGetFields($event)"
  (on_get_anchors)="handleGetAnchors($event)"
  (on_get_history)="handleGetHistory($event)"
  (on_run_now_node)="handleRunNowNode($event)"
  (on_evaluate)="handleEvaluate($event)"
></ngx-lcg-nodular>

Ensure that you replace placeholders like 'your-uuid-here', 'your-secret-key', and the data bindings with actual values from your application configuration. Implement the event handlers in your component to handle the output events.

Using the Web Component

Refer to the web-component-demo.html for an example of how to use the web component and handle output events:

<div id="ngx-lcg-nodular-container"></div>
<script defer>
  setTimeout(() => {
    const container = document.getElementById('ngx-lcg-nodular-container');
    let component = null;
    if (container) {
      component = document.createElement('ngx-lcg-nodular-js');
      container.appendChild(component);
      component.setAttribute('uuid', 'your-uuid-here');
      component.setAttribute('autocomplete_api', JSON.stringify({
        url: 'https://api.example.com/v1/fields/values',
        headers: {
          'Secret-Key': 'your-secret-key'
        }
      }));
      component.setAttribute('show_start_button', 'true');
      component.setAttribute('set_info', JSON.stringify(infoData));
      component.setAttribute('set_create', JSON.stringify(createData));
      component.setAttribute('set_update', JSON.stringify(updateData));
      component.setAttribute('set_get_fields', JSON.stringify(getFieldsData));
      component.setAttribute('set_get_anchors', JSON.stringify(getAnchorsData));
      component.setAttribute('set_get_history', JSON.stringify(getHistoryData));
      component.setAttribute('set_run_now_node', JSON.stringify(runNowNodeData));
      component.setAttribute('set_evaluate', JSON.stringify(evaluateData));

      // Add event listeners for output events
      component.addEventListener('on_get_info', (event) => handleGetInfo(event.detail));
      component.addEventListener('on_create', (event) => handleCreate(event.detail));
      component.addEventListener('on_update', (event) => handleUpdate(event.detail));
      component.addEventListener('on_get_fields', (event) => handleGetFields(event.detail));
      component.addEventListener('on_get_anchors', (event) => handleGetAnchors(event.detail));
      component.addEventListener('on_get_history', (event) => handleGetHistory(event.detail));
      component.addEventListener('on_run_now_node', (event) => handleRunNowNode(event.detail));
      component.addEventListener('on_evaluate', (event) => handleEvaluate(event.detail));
    }
  }, 1000);
</script>

Ensure that you replace placeholders like 'your-uuid-here', 'your-secret-key', and the data bindings with actual values from your application configuration. Implement the event handlers in your JavaScript to handle the output events.

Components

NgxLcgNodularComponent

• Selector: ngx-lcg-nodular
• Description: This component is responsible for managing nodular structures. It allows users to configure APIs, manage rules, and handle user interactions.

Inputs

• uuid: string: Unique identifier for the component instance.
• autocomplete_api: {url: string, headers: any}: Configuration for the autocomplete API.
• show_start_button: boolean: Determines if the start button should be displayed.
• use_active_toggle_event: boolean: If true, uses the active toggle event for status changes.
• set_info: any: Triggers the setting of information.
• set_create: any: Triggers the creation process.
• set_update: any: Triggers the update process.
• set_get_fields: any: Triggers the retrieval of fields.
• set_get_anchors: any: Triggers the retrieval of anchors.
• set_get_history: any: Triggers the retrieval of history.
• set_run_now_node: any: Triggers the execution of a node immediately.
• set_evaluate: any: Triggers the evaluation process.
• set_get_filter_count: any: Triggers the retrieval of filter count.
• set_get_agents: any: Triggers the retrieval of agents.
• set_get_actions: any: Triggers the retrieval of actions.
• set_active_toggle: any: Triggers the active toggle event.
• use_filter_count: boolean: Enables or disables the filter count feature.

Outputs

• on_get_info: EventEmitter<any>: Emits an event when information is retrieved.
• on_create: EventEmitter<any>: Emits an event when a creation process is completed.
• on_update: EventEmitter<any>: Emits an event when an update process is completed.
• on_get_fields: EventEmitter<any>: Emits an event when fields are retrieved.
• on_get_anchors: EventEmitter<any>: Emits an event when anchors are retrieved.
• on_get_history: EventEmitter<any>: Emits an event when history is retrieved.
• on_run_now_node: EventEmitter<any>: Emits an event when a node is executed immediately.
• on_evaluate: EventEmitter<any>: Emits an event when the evaluation process is completed.
• on_get_filter_count: EventEmitter<any>: Emits an event when filter count is retrieved.
• on_get_agents: EventEmitter<any>: Emits an event when agents are retrieved.
• on_get_actions: EventEmitter<any>: Emits an event when actions are retrieved.
• on_active_toggle: EventEmitter<any>: Emits an event when the active toggle is triggered.