# angular5-stepper

> Angular 5+ stepper module

Latest version **1.0.6** (published 2018-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular5-stepper
pnpm add angular5-stepper
yarn add angular5-stepper
bun add angular5-stepper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-04-14 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Indra Jeet |
| Maintainers | indra0510 |
| Keywords | angular, angular4, angular5, ng4, ng5, stepper, angular-stepper, angular5-stepper, indrajeet, indra, aot, aot-compatible, aot-compilation, ng, typescript |

## Links

- npm: https://www.npmjs.com/package/angular5-stepper
- Repository: https://github.com/indrajeet0510/angular5-stepper
- Homepage: https://github.com/indrajeet0510/angular5-stepper#readme
- Issues: https://github.com/indrajeet0510/angular5-stepper/issues
- npm.io page: https://npm.io/package/angular5-stepper

## Dependencies (1)

- [npm](https://npm.io/package/npm.md) ^5.8.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-04-14
- 1.0.5 — 2018-04-14
- 1.0.4 — 2018-04-10
- 1.0.3 — 2018-04-10
- 1.0.2 — 2018-04-10
- 1.0.1 — 2018-04-10
- 1.0.0 — 2018-04-10

## 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
```typescript
  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
```typescript
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](https://raw.githubusercontent.com/indrajeet0510/angular5-stepper/master/demo/screenshots/2.PNG)
![alt text](https://raw.githubusercontent.com/indrajeet0510/angular5-stepper/master/demo/screenshots/1.PNG)

---
_Source: https://npm.io/package/angular5-stepper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._