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

File

src/lib/markup-kit/executors/mefdev-executor-page/mefdev-executor-page.component.ts

Description

A component that allows us to create a content page - a step in our executor. Each individual step can have different styles, content and settings.

Example of usage:

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

Implements

OnChanges

Metadata

selector mefdev-executor-page
template 
<ng-content></ng-content>

Index

Properties
Inputs
Outputs

Constructor

constructor(_mainExecutor: StepExecutorComponent, _elementRef: ElementRef)
Parameters :
Name Type Optional
_mainExecutor StepExecutorComponent No
_elementRef ElementRef No

Inputs

isActive
Type : boolean
Default value : false

The input parameter that corresponds to whether the current step matches the respective page. The value of the active page is passed by reference from the specific component StepExecutorComponent.

 <mefdev-step-executor #mainExecutor>
   <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 0">
   <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 1">
   <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 2">
 </<mefdev-step-executor>
isCompleted
Type : boolean
Default value : false

The input parameter that checks whether the step is completed.

 <mefdev-executor-page [isCompleted]="mainExecutor.activePageInd >= 0"></mefdev-executor-page>
title
Type : string

The title of the step

 <mefdev-executor-page [title]="'Description of situation 1'"></mefdev-executor-page>

Outputs

isCompletedChange
Type : EventEmitter<boolean>

The output parameter that emits a boolean value indicating whether our completed step has changed.

 <mefdev-executor-page (isCompletedChange)="onStepChanged($event)"></mefdev-executor-page>

Properties

Public elRef
Type : ElementRef

results matching ""

    No results matching ""