npx ng generate @schematics/angular:component --name=ExamplePage --style=scss --no-interactive

import { PfeBusinessService } from '@allianz/ngx-pfe';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MyPageConfig } from '../page-config.model';
import { ExamplePageConfig } from './example-page.model';

@Component({
  selector: 'allianz-example-page',
  templateUrl: './example-page.component.html',
  styleUrls: ['./example-page.component.scss'],
})
export class ExamplePageComponent implements OnInit {
  examplePageConfig?: ExamplePageConfig;

  constructor(private activatedRoute: ActivatedRoute, private pfeBusinessService: PfeBusinessService<MyPageConfig>) {
    // Get the page configuration from the activatedRoute:
    const pageConfig: MyPageConfig = this.pfeBusinessService.getPageConfigFromRoute(this.activatedRoute);
    this.examplePageConfig = pageConfig?.examplePageConfig;
  }

  ngOnInit(): void {
    // The pfeBusinessService can be used to interact with the state and other pfe functionalities:
    this.pfeBusinessService.storeValue('$.someAttribute', true);
    this.pfeBusinessService.setPageStatus(true);
  }
}

export interface ExamplePageConfig {
  aConfigurationAttribute: string;
}

pfeBusinessService.setPageStatus(<boolean>);

describe('ExamplePageComponent', () => {
  const examplePageConfig = {
    firstConfigValue: 'test',
    secondConfigValue: 'test2',
  };

  const pageConfigRoute = new MockActivatedRoute<DemoAppPageConfig>({
    pageId: 'mockpage',
    examplePageConfig: examplePageConfig,
  });

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ExamplePageComponent],
      imports: [
        NgxPfeTestingModule,
        BrowserModule,
        NxIconModule,
        NxLinkModule,
        TranslateModule,
      ],
      providers: [
        { provide: ActivatedRoute, useValue: pageConfigRoute },
        { provide: APP_BASE_HREF, useValue: '/' },
        provideHttpClient(withInterceptorsFromDi()), 
        provideHttpClientTesting(),
      ],
    }).compileComponents();
  }));
});

import { PageConfig } from '@allianz/ngx-pfe';
import { ExamplePageConfig } from './example-page/example-page.model';

export interface MyPageConfig extends PageConfig {
  examplePageConfig?: ExamplePageConfig;
}

import { PageDefinition, PfePageMappingService } from '@allianz/ngx-pfe';
import { examplePageRoute } from './example-page/example-page.route';
import { MyPageConfig } from './page-config.model';

// This is used, to get a typesafe mapping from the page config attributes to the page type.
const pageConfigModel =
  <TObj>() =>
  (name: keyof TObj) =>
    name;
const getConfigPropertyName = pageConfigModel<MyPageConfig>();

// This list contains all the page type mappings
export const pages = new Map<string, PageDefinition>();

// The page mapping maps the property name in the configuration
// to the corresponding page component. See below for more details.
// For lazy loaded pages:
PfePageMappingService.addLazyLoadedPageToMap(pages, getConfigPropertyName('examplePageConfig'), examplePageRoute);

// And also for non-lazy loaded pages:
// PfePageMappingService.addPageToMap(pages, getConfigPropertyName('examplePageConfig'), ExamplePageComponent);

npx ng generate @schematics/angular:module --name=ExamplePage --no-interactive

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ExamplePageComponent } from './example-page.component';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: ExamplePageComponent,
      },
    ]),
  ],
})
export class ExamplePageModule {}

export const examplePageRoute = {
  loadChildren: () => import('./example-page.module').then((m) => m.ExamplePageModule),
};

export const examplePageRoute = {
  loadComponent: () => import('./example-page.component').then((m) => m.ExamplePageComponent),
};

{
  "sideEffects": false
}

PfePageMappingService.addLazyLoadedPageToMap(
  pages,
  // The lazyLoadedPage configuration attribute name comes from the global page configuration data model
  getConfigPropertyName('examplePageConfig'),
  examplePageRoute
);

PfePageMappingService.addPageToMap(
  pages,
  getConfigPropertyName('examplePageConfig'),
  ExamplePageComponent
);

{
  // The errorPageNavigation can be used for a global error handling.
  // It can catch all errors that are not handled by more local error handling.
  "errorPageNavigation": [
    {
      "nextPageId": "globalErrorPage"
    }
  ],
  "pages": [
    {
      // Every page has to have a unique ID. It is used in the navigation by other pages and to
      // link this navigation to a page configuration, which defines the content.
      "pageId": "welcomePage",
      // The nextOptionList contains a list of pages this page can navigate to
      // when the user clicks on next in the journey.
      // The entries of the list are checked in the defined order. The first one with matching conditions is
      // then selected as the one to navigate to.
      "nextOptionList": [
        {
          // The ID of the next page to navigate to
          "nextPageId": "additionalInformationPage",
          // Navigation conditions can be used to only navigate to a certain page
          // if the conditions are fulfilled.
          // They can access the state of the application. This makes it possible
          // to react to user input.
          "conditions": [
            {
              "type": "PFE_EXPRESSION",
              "value1Expression": "$.additionalSupport"
            }
          ]
        },
        {
          // This entry in the nextOptionList does not define any conditions.
          // If none of the previous entries' conditions are met then this entry will be chosen.
          "nextPageId": "personalDetailsPage"
        }
      ]
    },

    {
      "pageId": "additionalInformationPage",
      "nextOptionList": [
        {
          "nextPageId": "personalDetailsPage"
        }
      ]
    },

    {
      "pageId": "personalDetailsPage",
      // If the nextOptionList is empty, or omitted, the user won't be able to navigate forward.
      // This does not influence the visibility of the next navigation button, which can
      // be done via the hideNextButton flag of a page configuration.
      "nextOptionList": []
    }
  ]
}

{
  "firstPage": {
    // The nextOptionList in the firstPage configuration is exactly the same
    //  as in the pages navigation
    "nextOptionList": [
      {
        "nextPageId": "pageA",
        // Conditions can be used to dynamically determine the first page to be displayed
        "conditions": [
          {
            "value1Expression": "$.dataFromAServiceActivator"
          }
        ]
      },
      {
        // An entry without conditions acts as the fallthrough default.
        "nextPageId": "pageB"
      }
    ],
    // The onEnterActions are ran, before the first page is determined.
    // It is also possible to trigger asynchronous service activators during
    // startup of the application. These will then continue to run in the background
    "onEnterActions": [
      {
        "type": "TRIGGER_SERVICE_ACTIVATORS",
        "serviceActivators": [
          {
            "globalConfigId": "aServiceActivator"
          }
        ]
      }
    ]
  }
}

{
  "pages": [
    {
      // pageA and pageB both navigate to the navigationNode entry
      // of the configuration. That means they essentially share the nextOptionList
      "pageId": "pageA",
      "nextOptionList": [
        {
          "nextPageId": "navigationNode"
        }
      ]
    },
    {
      "pageId": "pageB",
      "nextOptionList": [
        {
          "nextPageId": "navigationNode"
        }
      ]
    },
    {
      "pageId": "navigationNode",
      // The entry in the navigation is marked as a navigationNode
      // It is not necessary to create an entry in the pagesConfiguration for it.
      // The entry therefore is a pure navigation node/page, which is invisible.
      "navigationNode": true,
      // The nextOptionList works exactly the same as for visible pages.
      // If another page, for example pageA, navigates to the
      // navigationNode, the nextOptionList is evaluated and
      // a navigation to the actual target page is triggered.
      "nextOptionList": [
        {
          "nextPageId": "pageC",
          "conditions": [
            {
              "value1Expression": "$.aValueInTheState"
            }
          ]
        },
        {
          "nextPageId": "pageD"
        }
      ]
    },
    {
      "pageId": "pageC"
    },
    {
      "pageId": "pageD"
    }
  ]
}

const myConfig: NgxPfeConfig<AppConfiguration, MyPageConfig, MyActionConfig> = {
  navConfiguration: <the navigation config>,
  pagesConfiguration: <the page configurations>,
  appConfiguration: {
    pfeConfig: <the pfe config>
  },
};

providers: [
  { provide: NGX_PFE_FLOW_CONFIGURATION, useValue: Promise.resolve(exampleConfig) }
],

import { AppConfiguration, NgxPfeConfig, PfeActionConfig } from '@allianz/ngx-pfe';
import { MyPageConfig } from './page-config.model';

export const pfeConfig: NgxPfeConfig<AppConfiguration, MyPageConfig, PfeActionConfig> = {
  navConfiguration: {
    pages: [
      {
        pageId: 'examplepage',
      },
    ],
  },
  pagesConfiguration: [
    {
      pageId: 'examplepage',
      examplePageConfig: {
        aConfigurationAttribute: 'example',
      },
      hideBackButton: true,
    },
  ],
  appConfiguration: {
    pfeConfig: {
      nextButtonLabel: 'Next',
      backButtonLabel: 'Back',
    },
  },
};

{
  "navConfiguration": {
    "pages": [
      {
        "pageId": "examplepage"
      }
    ]
  },
  "pagesConfiguration": [
    {
      "pageId": "examplepage",
      "examplePageConfig": {
        "aConfigurationAttribute": "example"
      },
      "hideBackButton": true
    }
  ],
  "appConfiguration": {
    "pfeConfig": {
      "nextButtonLabel": "Next",
      "backButtonLabel": "Back"
    }
  }
}

npx ng generate @schematics/angular:module --name=SecondPage --no-interactive

npx ng generate @schematics/angular:component --name=SecondPage --module=second-page --style=scss --no-interactive

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SecondPageComponent } from './second-page.component';

@NgModule({
  declarations: [SecondPageComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: SecondPageComponent,
      },
    ]),
  ],
})
export class SecondPageModule {}

export const secondPageRoute = {
  loadChildren: () => import('./second-page.module').then((m) => m.SecondPageModule),
};

export interface SecondPageConfig {}

import { PageConfig } from '@allianz/ngx-pfe';
import { ExamplePageConfig } from './example-page/example-page.model';
import { SecondPageConfig } from './second-page/second-page.model';

export interface MyPageConfig extends PageConfig {
  examplePageConfig?: ExamplePageConfig;
  secondPageConfig?: SecondPageConfig;
}

PfePageMappingService.addLazyLoadedPageToMap(pages, getConfigPropertyName('secondPageConfig'), secondPageRoute);

import { AppConfiguration, NgxPfeConfig, PfeActionConfig } from '@allianz/ngx-pfe';
import { MyPageConfig } from './page-config.model';

export const pfeConfig: NgxPfeConfig<AppConfiguration, MyPageConfig, PfeActionConfig> = {
  navConfiguration: {
    pages: [
      {
        pageId: 'examplepage',
        nextOptionList: [
          {
            nextPageId: 'secondPage',
          },
        ],
      },
      {
        pageId: 'secondPage',
      },
    ],
  },
  pagesConfiguration: [
    {
      pageId: 'examplepage',
      examplePageConfig: {
        aConfigurationAttribute: 'example',
      },
      hideBackButton: true,
    },
    {
      pageId: 'secondPage',
      secondPageConfig: {},
      hideNextButton: true,
    },
  ],
  appConfiguration: {
    pfeConfig: {
      nextButtonLabel: 'Next',
      backButtonLabel: 'Back',
    },
  },
};