NGX-PFE - Page Flow Engine
  1. Components
  2. PfeNdbxMasterPageComponent

File

libs/ngx-pfe/ndbx/pfe-ndbx-master-page/pfe-ndbx-master-page.component.ts

Description

The pfe-ndbx-master-page uses the standard ndbx components for the display blocks. For a custom display, the PfeMasterPageComponent can either be extended or its templates can be used.

Extends

PfeMasterPageComponent

Metadata

selector pfe-ndbx-master-page
styleUrls ./pfe-ndbx-master-page.component.scss
templateUrl ./pfe-ndbx-master-page.component.html

Index

Properties
Methods
Inputs

Inputs

nextClickedCallback
Type : function
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:52

Methods

Async backClicked
backClicked()
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:165
Returns : any
Async nextClicked
nextClicked(nextClickedCallback: () => void)
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:153
Parameters :
Name Type Optional
nextClickedCallback function No
Returns : any

Properties

appConfiguration
Type : AppConfiguration | undefined
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:56
Public backButtonLabel
Type : string
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:63
Public errorMessage
Type : string | undefined
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:82
Public errorMessageTemplate
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('errorMessageTemplate', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:38
Public footerTemplate
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('footerTemplate', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:50
Public headerTemplate
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('headerTemplate', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:47
Public labelCondition
Default value : false
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:81
Public navigateBackCallback
Type : function
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:60
Public navigateCallback
Type : function
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:58
Public navigateNextCallback
Type : function
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:59
Public navigationOrServiceActivatorInProgress
Default value : false
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:80

Flag, that is set to true, while a navigation or service activator call is active.
Public navigationTemplate
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('navigationTemplate', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:35

References to templates passed as ng-content
Public nextButtonLabel
Type : string
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:62
Public noConfig
Default value : false
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:73
Public noConfigMessageTemplate
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('noConfigMessageTemplate', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:41
pageConfig
Type : PageConfig | undefined
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:55
Public pageOutlet
Type : TemplateRef<> | null
Default value : null
Decorators :
@ContentChild('pageOutlet', {read: TemplateRef, static: true})
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:44
Public pageStatus
Default value : false
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:70

The pageStatus determines if the page is valid. It is used, to prevent navigation in certain cases. For example, when a form is not filled out completely.
Public subscriptions
Type : Subscription
Inherited from PfeMasterPageComponent
Defined in PfeMasterPageComponent:75 
import { fadeIn, PfeMasterPageComponent } from '@allianz/ngx-pfe';
import { Component } from '@angular/core';

/**
 * The pfe-ndbx-master-page uses the standard ndbx components for the display blocks.
 * For a custom display, the PfeMasterPageComponent can either be extended or its templates
 * can be used.
 */
@Component({
  selector: 'pfe-ndbx-master-page',
  templateUrl: './pfe-ndbx-master-page.component.html',
  styleUrls: ['./pfe-ndbx-master-page.component.scss'],
  animations: [fadeIn],
  standalone: false,
})
export class PfeNdbxMasterPageComponent extends PfeMasterPageComponent {}

<div *ngIf="headerTemplate">
  <ng-container
    *ngTemplateOutlet="
      headerTemplate;
      context: {
        appConfiguration: appConfiguration,
        pageConfig: pageConfig,
        nextButtonLabel: nextButtonLabel,
        backButtonLabel: backButtonLabel,
        navigate: navigateCallback,
        navigateNext: navigateNextCallback,
        navigateBack: navigateBackCallback,
        labelCondition: labelCondition,
        pageStatus: pageStatus,
        errorMessage: errorMessage,
        noConfig: noConfig,
        navigationOrServiceActivatorInProgress: navigationOrServiceActivatorInProgress
      }
    "
  ></ng-container>
</div>

<div nxRow rowJustify="center,center,center,center">
  <div nxCol="12,12,10,10">
    <pfe-error-message [message]="errorMessage" [hideError]="!errorMessage"> </pfe-error-message>
  </div>
</div>

<div nxRow rowJustify="center,center,center,center">
  <div *ngIf="noConfig">Configuration could not be loaded</div>
</div>

<div nxRow>
  <div nxCol="12,12,12,12" [@.disabled]="!!pageConfig?.disableAnimations" [@routeAnimations]="pageConfig?.pageId">
    <router-outlet></router-outlet>
  </div>
</div>

<ng-template #defaultNavigationTemplate>
  <div
    nxRow
    rowJustify="center,center,center,center"
    [@.disabled]="!!pageConfig?.disableAnimations"
    [@routeAnimations]="pageConfig?.pageId"
  >
    <div nxCol="12,12,12,12" class="component">
      <pfe-nav-buttons-container
        nxNextType="block primary"
        nxBackType="block secondary"
        nxNextLabel="{{ pageConfig?.nxNextText ? pageConfig?.nxNextText : nextButtonLabel }}"
        nxBackLabel="{{ pageConfig?.nxBackText ? pageConfig?.nxBackText : backButtonLabel }}"
        [nxNextAction]="navigateNextCallback"
        [nxBackAction]="navigateBackCallback"
        [nxNextHidden]="!!pageConfig?.hideNextButton"
        [nxBackHidden]="!!pageConfig?.hideBackButton"
        [nxNextOptionalLabel]="pageConfig?.nextBtnOptionalLabel"
        [nxEnableNextOptionalLabel]="labelCondition"
        [nxBackLink]="!!pageConfig?.linkBackButton"
        [nxNextLink]="!!pageConfig?.linkNextButton"
        [nxDisableNext]="!!(!pageStatus || navigationOrServiceActivatorInProgress)"
        [nxDisableBack]="navigationOrServiceActivatorInProgress"
      >
      </pfe-nav-buttons-container>
    </div>
  </div>
</ng-template>
<div *ngIf="navigationTemplate" [@.disabled]="!!pageConfig?.disableAnimations" [@routeAnimations]="pageConfig?.pageId">
  <ng-container
    *ngTemplateOutlet="
      navigationTemplate;
      context: {
        appConfiguration: appConfiguration,
        pageConfig: pageConfig,
        nextButtonLabel: nextButtonLabel,
        backButtonLabel: backButtonLabel,
        navigate: navigateCallback,
        navigateNext: navigateNextCallback,
        navigateBack: navigateBackCallback,
        labelCondition: labelCondition,
        pageStatus: pageStatus,
        errorMessage: errorMessage,
        noConfig: noConfig,
        navigationOrServiceActivatorInProgress: navigationOrServiceActivatorInProgress
      }
    "
  ></ng-container>
</div>
<div *ngIf="!navigationTemplate">
  <ng-container
    *ngTemplateOutlet="defaultNavigationTemplate"
    [@.disabled]="!!pageConfig?.disableAnimations"
    [@routeAnimations]="pageConfig?.pageId"
  ></ng-container>
</div>
<div *ngIf="footerTemplate">
  <ng-container
    *ngTemplateOutlet="
      footerTemplate;
      context: {
        appConfiguration: appConfiguration,
        pageConfig: pageConfig,
        nextButtonLabel: nextButtonLabel,
        backButtonLabel: backButtonLabel,
        navigate: navigateCallback,
        navigateNext: navigateNextCallback,
        navigateBack: navigateBackCallback,
        labelCondition: labelCondition,
        pageStatus: pageStatus,
        errorMessage: errorMessage,
        noConfig: noConfig,
        navigationOrServiceActivatorInProgress: navigationOrServiceActivatorInProgress
      }
    "
  ></ng-container>
</div>

./pfe-ndbx-master-page.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""