Install archwizard using npm

Archwizard

npm install --save angular-archwizard

No Dependencies for this module.

Add ArchwizardModule into your FormsModule class. FormModule would look like this

        
        import {NgModule} from '@angular/core'; 
        import { ArchwizardModule } from 'angular-archwizard';
        import { CircleStyleComponent } from './circle-style/circle-style.component';
        
        @NgModule({                           
        imports: [ArchwizardModule],
        declarations: [CircleStyleComponent]
        export class FormWizardModule { }
        })
                        

circle-style.component.html would look like this

             
            
                 <aw-wizard>
                         <aw-wizard-step stepTitle="Title of step 1">
                          Content of Step 1
                           <button type="button" awNextStep>Next Step </button>
                           <button type="button" [awGoToStep]="{stepIndex: 2}">Go directly to third Step </button>
                         </aw-wizard-step>
                         <aw-wizard-step stepTitle="Title of step 2" awOptionalStep>
                          Content of Step 2
                           <button type="button" awPreviousStep>Go to previous step </button>
                           <button type="button" awNextStep>Go to next step </button>
                         </aw-wizard-step>
                         <aw-wizard-step stepTitle="Title of step 3">
                          Content of Step 3
                           <button type="button" awPreviousStep>Previous Step </button>
                           <button type="button" (click)="finishFunction()">Finish </button>
                         </aw-wizard-step>
                       </aw-wizard>