How to display a screen

In this section, you will find how to display a server-driven screen.

Display a screen through a URL

For Angular projects

To define where you should display a server-driven screen on Angular, you should use a component provided by the <beagle-remote-view> library.

On the html file of your component, add the remote view.

<beagle-remote-view [loadParams]="loadParams"></beagle-remote-view>

Once you made it, access the controller component and create the loadParams, which is expected by the remote view.

loadParams: LoadParams;

  constructor() {
    this.loadParams = {
      path: '/pathToScreen'

For React projects

To define a server-driven screen on React, you need to create a service with a minimum configuration, see the example below:

import { createBeagleUIService } from "@zup-it/beagle-react";

export default createBeagleUIService({
  baseUrl: "",
  components: {},

Once you made it, use two components provided by Beagle’s library to define where the server-driven screen will be rendered:

  1. The BeagleProvider
  2. The BeagleRemoteView
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView path={'/pathToScreen'} />

export default App;