Package Exports
- ngx-step
- ngx-step/bundles/ngx-step.umd.js
- ngx-step/fesm2015/ngx-step.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-step) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
ngx-step
A simple library module to generate the different stages for activity to track multiple stages.
Dependent modules
Fontawsome module need to install at project level to support icons used in this library. this library you need to install manually in your application.
npm i @fortawesome/fontawesome-free
then
npm i ngx-step
NgxStep
NgxStep library is easy to use into your angular project which can be use for the purpose of generating and showing different stages for any lifecycle stages and their status. i.e Product lifycycle stages , Supply chain lifecycle stages, Product shipment and delivery tracking and many more.
Library is easy to configure and customizes as per your requirements.
This Library comes with Two options :
1) BASIC
2) CUSTOM
How to use
Use of this library is very simple .
app.module.ts
import {NgxStepModule} from 'ngx-step'
Then add into imports array of app module file
@NgModule({
declarations: [
],
imports: [
NgxStepModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Use inside your component and HTML
component.ts code
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demoapp';
stages = [
{
"name": "Order Placed",
"status": "COMPLETED",
},
{
"name": "Order Shipped",
"status": "COMPLETED",
},
{
"name": "Out For Delivery",
"status": "IN_PROGRESS",
}
]
}
component.html code
<ngx-step [stages]="stages">
</ngx-step>
Advanced Configuration inputs parameters
1) stages
Array of Object which will hold your stage data. Each object in an array represent one stage. Stage object will have Two Keys:
name
= This is the Name of your Stage and will be visible to UI . Stage name can be any text.status
= this will hold the current status value of your stage.
Possible Values of Stage status
are NOT_STARTED
, IN_PROGRESS
, COMPLETED
, FAILED
Example:
stages =[{'name':'STEP-1','status':'COMPLETED'},{'name':'STEP-2','status':'IN_PROGRESS'}]
2) options
This input parameter is an object and used for overriding the default configurations to get the more felxibility of use as your requirements. If user is passing this parameter then make sure to select the type 'CUSTOM'
.
options
Object has following keys:
type
: Default BASIC Possible Values are a) BASIC - Default Selected value for simple stages with status. b) CUSTOM - Use this option if want to manage your own custom stages and status logic from diffrent progress update info data.finalStageName
: By default it will be'FINISH'
, and will be the name of last Stage. Pass the string value if you want to override the Last stage name. Default value is set toFINISH
.isMultiWordStageName
: Aceept Boolean value, Set asTrue
if your stage name is multiple words name like ORDER_SHIPPED , DEVICE_INSTALLATION etc.
Note: If value is true then textSeparator value must be provide.
textSeparator
: Is the symbol used identified the text separator symbol used for multiple Word stage names. Default value is'_'
.
Structure:
options = {
type: 'BASIC',
finalStageName: 'FINISH',
isMultiWordStageName : false,
textSeparator: '_'
}
3) updateProgressLogs
Its and array of object will be used when user has selected the CUSTOM type stepper i.e options.type = 'CUSTOM'
.
This option will be usefull when you have some real time stage data updates with some additional information about each stage in addition to name and status. like Message to end user , Detailed Logs information, Error information etc.
Structure:
[{'name':'STEP-1','status':'COMPLETED' , 'message': "We have completed the stage1"},{'name':'STEP-2','status':'IN_PROGRESS' , 'message': "This stage is in progress"}]
4) jobOverallStatus
Overall status of Job or Task which will have following values
a) ACTIVE : Pass this value to represent that main process is Active and in progress.
b) NOT_STARTED: Pass this value to represent that main process is not yet started . In this case status of your sub stages and child stages will be NOT_STARTED
.
c) COMPLETED : Pass this value to represent that main process is completed and all its sub or child stages has been completed successfully.
d) FAILED: Pass this value to represent that main process is Failed due to any of the reason or any of the state failed.
Changes Logs
v0.0.1
-Supports only BASIC type stepper.v1.0.0
- Added support for CUSTOM option to customise your stages in more flexible way.v1.1.0
- Fixed issue related to CUSTOM stages and added support to allow normal STGAE array data as well.
example: For custom now you can provide the stages in below formats as well:
stages=['order_placed' , 'order_shipped', 'out_for_delivery']
OR
stages = [
{
"name": "Order Placed",
"status": "COMPLETED",
},
{
"name": "Order Shipped",
"status": "COMPLETED",
},
{
"name": "Out For Delivery",
"status": "IN_PROGRESS",
}
]
Reference
This library was generated with Angular CLI version 12.2.18.
License
MIT