How Do I Preview the Runtime of an Angular Project?

Welcome to this guide on how to preview the Runtime of an Angular project. This guide will walk you through the steps to preview the Runtime of your Angular project. So let’s get started.

Once you open a project in SmartUX Studio, ng serve might be still in progress. Let it complete.

Live Preview is available once ng serve is done.

Click on the Live Preview icon. This action will set Magic xpa Studio in Runtime mode with Edit mode enabled.

You can see the loader until SmartUX Studio prepares your application for Live preview.

In a short while, SmartUX Studio brings up Live Preview of the application as shown below.

Once a component is shown in Live Preview, the data about variables from the component is recorded as mockdata and the recording icon turns green.

You can use the recorded mockdata in Canvas to show the values on the UI elements.

If you want to see the preview in full screen, you can open Live Preview in a new tab by clicking on the indicated icon.

This is how you can see your application in Live preview!