Defining layouts

Each app has some components that repeat on every page. For example, this may be the header or the footer component. In order to make the app.component.html file generic across all applications layouts should be used.

Full list of components and their properties is available in component storybook.

Usage

In root level of the manifest the full list of layouts can be defined. Each layout must use a unique name. The default layout can be also overridden.

Example:

{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        { "type": "flow" }
      ],
    },
    "custom": {
      "components": [
        { "type": "header" },
        { "type": "flow" },
        { "type": "footer" }
      ]
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    },
    {
      "path": "second",
      "layout": "custom"
      "components": []
    }
  ]
}

The component with type flow will be replaced with whatever is defined in the screen the customer is on.

Component type flow can also be nested:

{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        {
          "type": "container",
          "config": {
            "components": [
              { "type": "flow" },
            ],
          },
        },
      ],
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    }
  ]
}