bs-stepper 在我的 angular 代码中不起作用

Question

I'm using bs-stepper module in my angular code its not working as expected, its throwing some errors please look at my code here

export class FileUploadProcessComponent implements OnInit {
     import Stepper from 'bs-stepper';

// @ViewChild("stepperProcess") stepperProcess : Element | null
     NgOnInit(): void {
         document.addEventListener('DOMContentLoaded', function () {
              var stepper = new Stepper(<Element>  document.querySelector('.bs-stepper'))
         })
    }
}

Html code is

<div id="stepper1" class="bs-stepper" #stepperProcess>
                <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>

And the errors are

ERROR NullInjectorError: R3InjectorError(AppModule)[Stepper -> Stepper -> Stepper]: NullInjectorError: No provider for Stepper. at NullInjector.get (core:mjs:6364.27) at R3Injector.get (core:mjs:6791.33) at R3Injector.get (core:mjs:6791.33) at R3Injector.get (core:mjs:6791.33) at ChainedInjector.get (core:mjs:13868.36) at lookupTokenUsingModuleInjector (core:mjs:3286.39) at getOrCreateInjectable (core:mjs:3331.12) at Module.ɵɵdirectiveInject (core:mjs:10881.12) at NodeInjectorFactory.FileUploadProcessComponent_Factory [as factory] (file-upload-process.component:ts:17.40) at getNodeInjectable (core:mjs:3516:44)

Answer 1

NgOnInit() should be ngOnInit() . Working example here: https://stackblitz.com/edit/bs-stepper-angular