Navigation example

In this example, we create the configuration for multiple nested frames with navigation panels. It consists of:

  • A home page that shows some introductory text and two navigation buttons on the right, ‘Home’ and ‘Edit model’.
  • An ‘Edit model’ page where you see a 3D model on the left with a multi-step control panel on the right.

This is built up from a series of nested frames as follows:

  • my-home-frame with an outlet on the left and a navigation panel on the right, with the two buttons.
    In the outlet:
    • When you click ‘Home’ you see my-intro-frame that contains the introductory text.
    • When you click ‘Edit model’ you see my-model-frame that contains a 3D viewer on the left, an outlet on the right, and also a datastore and a model.
      The outlet contains a multi step control panel made up from the following frames:
      • my-box-frame that contains a control panel with some inputs for defining a box.
      • my-sphere-frame that contains a control panel with some inputs for defining a sphere.
      • my-results-frame that contains a control panel for displaying model results.
      • All three frames subscribe to the datastore, so that all their values are saved in one place for the model.

The example demonstrates the use of the NavPanel and RouterOutlet.

In your solution folder:

The solution should look like the images below.