I am currently facing issues with the bs-stepper module in my Angular code. It is not functioning as expected and is throwing errors. Here is a snippet of my code:
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'))
})
}
}
This is the HTML code:
<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>
Additionally, here are the errors I am encountering:
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)