How Do I Use the Mock Data Editor for Angular Components?

278 views

This guide will walk you through the process of using the Mock Data Editor for Angular Component.

Follow the precise instructions to navigate, edit, and save mock data effectively within the application.

1. Click “MyComponent”

Please navigate to the MyComponent section to continue.

Click 'MyComponent'

2. Enable View Code and Expanded View

To enhance your editing experience, you can Activate Code View and Expand View.
By activating Code View, you gain direct access to your project’s underlying code, allowing for precise adjustments and modifications.
Meanwhile, expanding the view provides a broader perspective of your layout, enabling you to see more of your content at once.
Together, these features facilitate a more streamlined workflow, helping you to manage and refine your project effectively.

Enable View Code and Expanded View

3. Drag and drop Data Model

Simply drag and drop the Edit Data Model onto the canvas to add it seamlessly to your workspace.

Drag and drop Data Model

4. Input Widget on Canvas

The Input Widget displayed on the Canvas showcases its default value sourced from the XPA.

Input Widget on Canvas

5. Model Section

Next, navigate to the Models section, where you’ll find a button that allows you to input or edit the mock data for the currently open component.

Model Section

6. Custom Mock Data

Click the ‘Custom Mock Data’ button to open a dialogue box where you can input or modify your mock data.

Custom Mock Data

7. Mock Data Editor

In the Mock Data Editor, you can easily input your desired data directly into the Value field.

Mock Data Editor

8. Input Mock Data

To apply the Mock Data, simply enter your desired value and click the ‘Save’ button.
After saving, feel free to click the ‘Done’ button to close the Mock Data editor window.

Input Mock Data

9. Save Component Changes

You will now see the mock data displayed in the editor on the canvas.
This data is exclusively visible while you are designing the component.
When you switch to Live Preview, the actual data will be shown instead.
To ensure that your changes to the component are saved, simply click the Save button.

Save Component Changes

10. Live Preview

Activate Live Preview Mode.
As previously indicated, the field populated with mock data will display its actual value in Live Preview.

Live Preview

11. Click “MyComponent”

Next, exit the Live Preview mode and return to the component.

Click 'MyComponent'

12. My Component

The component will now display the provided mock data in design mode.

My Component

13. Mock Data Editor

What should a user do if they prefer not to use mock data or wish to revert to the default values?
Simply open the Mock Data editor, where you’ll find a button labelled ‘Use Default Value.’
This allows you to easily reset the data to its original state.

Mock Data Editor

14. Use Default Value

To set the default value, please navigate to the specified location.
Once there, click the “Use Default Value” button.
This action will reset the value field, allowing the Input widget to utilize the default value.
Click the “Done” button to confirm and save the default value selection.

Use Default Value

15. My Component

In the component canvas, you’ll notice that the default value is now visible for the input widget.

My Component

The guide covered navigating to specific sections, editing data, and saving changes in the Mock Data Editor for Angular Component.