SSD - How to configure Input Component [(ngModel)] properties and then use it inside flow?

Community Training, Academy & Certifications
1

I want a sample configuration of input component [(ngModel)] property and I want to use the same to access the user input value inside flow.

4 Likes
2

@Vyshnav_PC @Shamnad_KS @Ziyad @Sidharth_K_P @Simphiwe @Muhseena_T @ragesh-a please help Vignesh

2 Likes
3

To configure an Input Component with [(ngModel)] in Neutrinos Studio SSD (Service Studio Designer) and use it inside a flow, follow these detailed steps:

1. Drag & Drop the Input Component

  1. Open your page in the Page Designer.
  2. From the UI components, drag and drop the Input component into the desired section.

2. Bind the Input to a Variable with [(ngModel)]

  1. Select the Input component.
  2. In the Properties panel, find the field named ngModel or [(ngModel)].
  3. Bind it to a local variable or property in the component, such as:

CopyEdit

pageData.userName

This creates a two-way binding: whatever the user types will automatically update pageData.userName.

3. Define the Variable (If Not Already Present)

  • Open the Logic → Variables tab in your page.
  • Create a variable like:

ts

CopyEdit

pageData = {
  userName: ''
};

4. Using Input Data Inside a Flow

To use this input value in a flow (like on button click):

  1. Add a Button component and configure the (click) event.
  2. Link the button click to a flow or method.
  3. Inside the flow, access the value via pageData.userName.

Example Use:

ts

CopyEdit

runFlow() {
  const name = this.pageData.userName;

  if (name) {
    this.sdService.navigateToPage('welcome-page', { queryParams: { name } });
  } else {
    console.warn('No input provided');
  }
}

Use Case Example: Display in Flow or API Call

ts

CopyEdit

callAPI() {
  const inputVal = this.pageData.userName;
  this.sdService.nHttpRequest({
    url: 'https://api.example.com/submit',
    method: 'POST',
    body: { name: inputVal }
  }).then(res => {
    console.log('API Success:', res);
  });
}

Summary

Task Action
Input setup Drag component + bind to pageData.<var> using [(ngModel)]
Store data Ensure pageData object has the variable
Use in flow Access it via this.pageData.<var> in any flow or event
Dynamic use Pass to APIs, show in UI, or route based on value
5 Likes
4

please gudie me with an example

1 Like