@natec/mef-dev-ui-kit documentation
  1. Components
  2. StepExecutorComponent

File

src/lib/markup-kit/executors/step-executor/step-executor.component.ts

Description

Wrapper component that represents a specific encapsulated executor.

Example of usage:

<mefdev-step-executor #mainExecutor [view]="'regular'">

 <ng-template #title>
   <!-- Content for the executor title -->
 </ng-template>
 <ng-template #description>
   <!-- Content for the executor description -->
 </ng-template>

 <mefdev-executor-page
    [title]="'Description of situation 1'"
    [isActive]="mainExecutor.activePageInd === 0"
    [isCompleted]="mainExecutor.activePageInd >= 0">
     <!-- Content of the first executor step -->
 </mefdev-executor-page>
 <mefdev-executor-page
   [title]="'Description of situation 2'"
   [isActive]="mainExecutor.activePageInd === 1"
   [isCompleted]="mainExecutor.activePageInd >= 1">
    <!-- Content of the second executor step -->
 </mefdev-executor-page>
 <mefdev-executor-page
   [title]="'Description of situation 3'"
   [isActive]="mainExecutor.activePageInd === 2"
   [isCompleted]="mainExecutor.activePageInd >= 2">
     <!-- Content of the third executor step -->
 </mefdev-executor-page>

 <ng-template #footer>
   <!-- Content for the executor footer -->
 <ng-template>

</mefdev-step-executor>

https://mef.dev/ui_kit_demo/view/utils/main_executor

Implements

AfterViewInit

Metadata

selector mefdev-step-executor
styleUrls ./step-executor.component.scss
templateUrl ./step-executor.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)
Parameters :
Name Type Optional
renderer Renderer2 No
changeDetectorRef ChangeDetectorRef No

Inputs

show
Type : boolean

An optional input parameter that specifies whether to show your executor. Usually used when you have a slideup or right executor view

 <mefdev-step-executor [show]="true" [view]="'right'" #mainExecutor></mefdev-step-executor>
view
Type : string
Required :  true

Mandatory input parameter that specifies the type of the step-by-step wizard. It can have three options: regular, modal, right.

 <mefdev-step-executor #mainExecutor [view]="'regular'"></mefdev-step-executor>

Outputs

modalStepExecutorStateChange
Type : EventEmitter<boolean>

An output parameter that conveys the current state of the stepper in modal view

<mefdev-step-executor [view]="'modal'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #modalExecutor></mefdev-step-executor>
onActivePageChange
Type : EventEmitter<MefdevExecutorPageComponent>

The output parameter that emits the class of the active page - active step.

 <mefdev-step-executor #mainExecutor (onActivePageChange)="getActiveStep($event)"></mefdev-step-executor>
rightStepExecutorStateChange
Type : EventEmitter<boolean>

An output parameter that conveys the current state of the stepper in right view

<mefdev-step-executor [view]="'right'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #rightExecutor></mefdev-step-executor>

Methods

addPage
addPage(page: MefdevExecutorPageComponent)

Add new page

Parameters :
Name Type Optional
page MefdevExecutorPageComponent No
Returns : void
cancel
cancel()

Go back to the previous step

Returns : void
closeExecutor
closeExecutor()

A function that allows you to close your executor

Returns : void
modalStepExecutorVisibleChange
modalStepExecutorVisibleChange(value: boolean)

A function that is allows to track the status of your executor in the modal view

Parameters :
Name Type Optional
value boolean No
Returns : void
next
next()

Go to the next step

Returns : void
nextBtnIsDisabled
nextBtnIsDisabled()

Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button

Returns : boolean
prev
prev()

Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button

Returns : void
removePageByIndex
removePageByIndex(index: number)

Delete a page by its index

Parameters :
Name Type Optional
index number No
Returns : void
removeSpecificPage
removeSpecificPage(page: MefdevExecutorPageComponent)

Delete a specific page

Parameters :
Name Type Optional
page MefdevExecutorPageComponent No
Returns : void
rightStepExecutorVisibleChange
rightStepExecutorVisibleChange(value: boolean)

A function that is allows to track the status of your executor in the right view

Parameters :
Name Type Optional
value boolean No
Returns : void
setActivePage
setActivePage(pageNumber: number)

Set a specific active page

Parameters :
Name Type Optional
pageNumber number No
Returns : void

Properties

Public _activePageInd
Type : number
Default value : 0
container
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('container')

ViewChild reference to the host executor content.
description
Type : TemplateRef<void>
Decorators :
@ContentChild('description')

Template for displaying the content of the executor description.

<ng-template #description>
 <!-- Content for the executor description -->
</ng-template>
footer
Type : TemplateRef<void>
Decorators :
@ContentChild('footer')

Template for displaying the content of the executor footer.

<ng-template #footer>
   <!-- Content for the executor footer -->
</ng-template>
Public pages
Type : MefdevExecutorPageComponent[]
Default value : []
title
Type : TemplateRef<void>
Decorators :
@ContentChild('title')

Template for displaying the content of the executor title.

<ng-template #title>
  <!-- Content for the executor title -->
</ng-template>

Accessors

activePageInd
getactivePageInd()
setactivePageInd(activePageNumber: number)
Parameters :
Name Type Optional
activePageNumber number No
Returns : void
activePage
getactivePage()

results matching ""

    No results matching ""