https://github.com/ahmedalyousif/stepper-progress-bar
An Angular component that shows a progress bar for a group of steps.
https://github.com/ahmedalyousif/stepper-progress-bar
angular
Last synced: about 1 month ago
JSON representation
An Angular component that shows a progress bar for a group of steps.
- Host: GitHub
- URL: https://github.com/ahmedalyousif/stepper-progress-bar
- Owner: AhmedAlYousif
- License: apache-2.0
- Created: 2019-10-22T10:41:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-28T14:42:02.000Z (over 6 years ago)
- Last Synced: 2025-01-12T14:23:58.462Z (over 1 year ago)
- Topics: angular
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/stepper-progress-bar
- Size: 14.6 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# StepperProgressBar
This library represent a progress bar component that has steps in it. I used this [tutorial](https://medium.com/@beyondborders/building-a-responsive-progress-bar-ea5a0ecabe91) to create this component to be reusable in Angular.
# Install
`npm install stepper-progress-bar`
in your `app.module.ts` file:
```typescript
//...
import { StepperProgressBarModule } from 'stepper-progress-bar'
//...
@NgModule({
//...
imports: [
//...
StepperProgressBarModule,
//...
],
/...
})
export class AppModule { }
```
# How to Use
Your component HTML:
```html
Back//a button to go to previous step
Next//a button to go to next step
```
Your component .TS:
```typescript
import { Step, StepperProgressBarController } from 'stepper-progress-bar';
//...
steps:Step[] = new Array();
progressStepper:StepperProgressBarController = new StepperProgressBarController();
//...
this.steps.push(new Step('Step 1'));
this.steps.push(new Step('Step 2'));
this.steps.push(new Step('Step 3'));
//...
next(){
this.progressStepper.nextStep();
}
back(){
this.progressStepper.previousStep();
}
```
You can now have a vertical stepper progress bar:
in the html:
```html
```
in .TS
```javascript
isVertical=true;
```