libs/ngx-pfe-ndbx/src/ndbx/pfe-ndbx-master-page/pfe-ndbx-master-page.component.ts
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.
| selector | pfe-ndbx-master-page |
| styleUrls | ./pfe-ndbx-master-page.component.scss |
| templateUrl | ./pfe-ndbx-master-page.component.html |
Properties |
|
Methods |
|
Inputs |
| nextClickedCallback | |
Type : function
|
|
|
Inherited from
PfeMasterPageComponent
|
|
|
Defined in
PfeMasterPageComponent:57
|
|
| Async backClicked |
backClicked()
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:157
|
|
Returns :
any
|
| Async nextClicked | ||||||
nextClicked(nextClickedCallback: () => void)
|
||||||
|
Inherited from
PfeMasterPageComponent
|
||||||
|
Defined in
PfeMasterPageComponent:145
|
||||||
|
Parameters :
Returns :
any
|
| appConfiguration |
Type : AppConfiguration | undefined
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:61
|
| Public backButtonLabel |
Type : string
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:68
|
| Public errorMessage |
Type : string | undefined
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:87
|
| Public Readonly errorMessageTemplate |
Default value : contentChild('errorMessageTemplate', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:47
|
| Public Readonly footerTemplate |
Default value : contentChild('footerTemplate', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:55
|
| Public Readonly headerTemplate |
Default value : contentChild('headerTemplate', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:53
|
| Public labelCondition |
Default value : false
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:86
|
| Public navigateBackCallback |
Type : function
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:65
|
| Public navigateCallback |
Type : function
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:63
|
| Public navigateNextCallback |
Type : function
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:64
|
| Public navigationOrServiceActivatorInProgress |
Default value : false
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:85
|
|
Flag, that is set to true, while a navigation or service activator call is active. |
| Public Readonly navigationTemplate |
Default value : contentChild('navigationTemplate', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:45
|
|
References to templates passed as ng-content |
| Public nextButtonLabel |
Type : string
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:67
|
| Public noConfig |
Default value : false
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:78
|
| Public Readonly noConfigMessageTemplate |
Default value : contentChild('noConfigMessageTemplate', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:49
|
| pageConfig |
Type : PageConfig | undefined
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:60
|
| Public Readonly pageOutlet |
Default value : contentChild('pageOutlet', { read: TemplateRef })
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:51
|
| Public pageStatus |
Default value : false
|
|
Inherited from
PfeMasterPageComponent
|
|
Defined in
PfeMasterPageComponent:75
|
|
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:80
|
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 {}
@if (headerTemplate()) {
<div>
<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">
@if (noConfig) {
<div>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>
@if (navigationTemplate()) {
<div [@.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>
}
@if (!navigationTemplate()) {
<div>
<ng-container
*ngTemplateOutlet="defaultNavigationTemplate"
[@.disabled]="!!pageConfig?.disableAnimations"
[@routeAnimations]="pageConfig?.pageId"
></ng-container>
</div>
}
@if (footerTemplate()) {
<div>
<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