this.stepper.next() Causes the page to reload and again start from first Step

[ameysonawane]

Hi , I have implemented basic Stepper module , but the issue is when i click on next and it goes from Step 1 to Step 2 the page reloads itself and again it starts from step 1 . Code 👎 component.ts

import { Component, OnInit } from '@angular/core';
import Stepper from 'bs-stepper';

@Component({
  selector: 'app-data-migration',
  templateUrl: './data-migration.component.html',
  styleUrls: ['./data-migration.component.css']
})
export class DataMigrationComponent implements OnInit {

  name = 'Angular';
  private stepper: Stepper;

  next() {
    this.stepper.next();
  }

  onSubmit() {
    return false;
  }

  constructor() { }

  ngOnInit() {
    this.stepper = new Stepper(document.querySelector('#stepper1'), {
      linear: false,
      animation: true
    })
  }

}

Component.html

<div class="container">
    <!-- <hello name="{{ name }}"></hello> -->
    <div id="stepper1" class="bs-stepper">
      <div class="bs-stepper-header">
        <div class="step" data-target="#test-l-1">
          <button class="step-trigger">
            <span class="bs-stepper-circle">1</span>
            <span class="bs-stepper-label">Email</span>
          </button>
        </div>
        <div class="line"></div>
        <div class="step" data-target="#test-l-2">
          <button class="step-trigger">
            <span class="bs-stepper-circle">2</span>
            <span class="bs-stepper-label">Password</span>
          </button>
        </div>
        <div class="line"></div>
        <div class="step" data-target="#test-l-3">
          <button class="step-trigger">
            <span class="bs-stepper-circle">3</span>
            <span class="bs-stepper-label">Validate</span>
          </button>
        </div>
      </div>
      <div class="bs-stepper-content">
        <form (ngSubmit)="onSubmit()">
          <div id="test-l-1" class="content">
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
            </div>
            <button (click)="next()" class="btn btn-primary">Next</button>
          </div>
          <div id="test-l-2" class="content">
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
            </div>
            <button (click)="next()" class="btn btn-primary">Next</button>
          </div>
          <div id="test-l-3" class="content text-center">
            <button type="submit" class="btn btn-primary mt-5">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

[manumohant]

give button type="button" and try

[rachidkarra]

Yes , it worked for me. Thanks @manumohant