Angular 7 - Creating a Stepper/Wizard

Asked

Viewed 1,130 times

-2

I’m doing a sign-up page, which is working. I wanted to change her to a Stepper/Wizard, but I’m using Angular 7 with Bootstrap 4.

Has anyone ever done one or has an angle example?

javascript angular typescript

2 answers

0

I found a library called Bs-Stepper, which uses Bootstrap 4.

I installed it in the project as it says in the documentation: Bs-Stepper installation

There is a functional example in this link: Bs-Stepper example

Some details I needed to make to work was:

1- import the import Stepper from 'Bs-Stepper'; only in the Component that will use Stepper, IN IT ONLY!

2-Include the css and js files in angular.json

            "styles": [
              "projects/permissoes/src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/datatables.net/js/jquery.dataTables.min.js",
              "./node_modules/bs-stepper/dist/js/bs-stepper.min.js"
            ]

Or import the css into the file Styles.css of the project:

@import "~bs-stepper/dist/css/bs-stepper.css";

0

The angular material has a very cool Stepper, see:

https://material.angular.io/components/stepper/overview

Just install the necessary packages:

npm install --save @angular/material @angular/cdk @angular/animations

Import in the app.module:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

And then import the Stepper component into your module, as the documentation shows:

import {MatStepperModule} from '@angular/material/stepper';

Example in Stackblitz

  • In Material I found in Google, but needs to be in bootstrap 4.

Browser other questions tagged javascript angular typescript

You are not signed in. Login or sign up in order to post.