Fallback component

Existing content can be rendered in a page even if the frontend component has not been built or provisioned yet. This functionality is handled by the fallback component. Introduced with version 1.3.1 of the Magnolia front-end helpers, fallback components receive metadata properties in the metadata property and the other properties in the data property.

There is a default fallback component in each of the helper libraries. See, for example, the one for Angular named default-fallback.component.ts.


  • Angular

  • React

  • Vue

Add the following line to root.component.ts.


In App.js, use the value in the config object in the fallbackComponent attribute:

<EditablePage templateAnnotations={data.templateAnnotations} content={data.content} config={config} />

In PageLoader.vue, the SPAs must set the fallbackComponent in the config object:

this.config.fallbackComponent = value

The value can be one of the following:

  • A function that returns a component or a boolean value.

  • A boolean value.

Using the default fallback component

To use the default fallback component, you must set the fallbackComponent to the true value or to a function that returns the true value.

Using a custom fallback component

You can also define and use your own custom fallback component. A custom fallback component receives two properties:

  • metadata, for example @path, mgnl:template.

  • data, which includes all properties not included in metadata, for example title, text, image and so on.

To use a custom fallback component, you must set the fallbackComponent to a function that returns the custom fallback component.

In Angular (and by analogy also in React and Vue)

  • If setFallbackComponent(false); or setFallbackComponent(<function-that-returns-false>); then nothing is displayed.

  • If setFallbackComponent(true); or setFallbackComponent(<function-that-returns-true>); then the default fallback component is displayed.

  • If setFallbackComponent(<function-that-returns-a-component>); then the component is displayed.


Examples in the angular-sample in the Magnolia frontend-helpers repository: