Package Exports

angular5-stepper

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 (angular5-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular5+ Stepper

Easy to use vertical stepper with configurable navigation items and dynamic views

Installation

npm install --save angular5-stepper

Usage

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
  import {RouterModule} from "@angular/router";
  import {StepperModule} from 'angular5-stepper';
  
  import {ROUTES} from "./app.routing";
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,  
    ],
    imports: [
      BrowserModule,
      NgbModule.forRoot(),
      RouterModule.forRoot(ROUTES),
      StepperModule
    ],
    providers: [
    ],
    entryComponents: [
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

app.component.ts

import {Component} from "@angular/core";
import {IStepNavbar} from "angular5-stepper";

/**
 * These are dynamic component for mapping views which needs to be mapped with menu item list
 * You can have your own components mapped here. I made these components for demo purposes.
 */
import {View11Component} from "../stepper-views/navlist1/view1-1/view1-1.component";
import {View12Component} from "../stepper-views/navlist1/view1-2/view1-2.component";
import {View21Component} from "../stepper-views/navlist2/view2-1/view2-1.component";
import {View22Component} from "../stepper-views/navlist2/view2-2/view2-2.component";
import {View23Component} from "../stepper-views/navlist2/view2-3/view2-3.component";

@Component({
    selector: 'app-cmp',
    template: `<stepper-container-cmp [navbarList]="myNavbarList"></stepper-container-cmp>`
})

export class AppComponent {
  public myNavbarList: IStepNavbar[];
  constructor() {
    this.myNavbarList = <IStepNavbar[]> [
      {
        heading: 'NavList1',
        itemList: [
          {
            title: 'View 1.1',
            component: View11Component,
            status: 1
          },
          {
            title: 'View 1.2',
            component: View12Component,
            status: 0
          }
        ]
      },
      {
        heading: 'NavList2',
        itemList: [
          {
            title: 'View 2.1',
            component: View21Component,
            status: 0
          },
          {
            title: 'View 2.2',
            component: View22Component,
            status: 0
          },
          {
            title: 'View 2.3 (Disabled)',
            component: View23Component,
            status: 0,
            disabled: true
          },
          {
            title: 'View 2.4 (Disabled)',
            component: null,
            status: 0
          }
        ]
      }
    ];
  }
}

Screenshots

alt text