I am trying to use smart-wizard with angular 12 and having a bit of trouble in making it work. Here are the steps that I followed :
- npm install smartwizard
- Then imported smart wizard in my component I want to use it in.
import {
Component,
OnInit
} from '@angular/core';
import {
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material/dialog';
import {
smartWizard
} from 'node_modules/smartwizard';
import * as $ from "jquery";
@Component({
selector: 'app-start-up-wizard',
templateUrl: './start-up-wizard.component.html',
styleUrls: ['./start-up-wizard.component.scss']
})
export class StartUpWizardComponent implements OnInit {
constructor(public dialogRef: MatDialogRef < StartUpWizardComponent > ) {}
ngOnInit(): void {
console.log("reaching here");
$('#smartwizard').smartWizard();
}
onClose(): void {
this.dialogRef.close();
}
}
<div id="smartwizard">
<ul>
<li><a href="">Step Title 1<br /><small>Step Description 1</small></a></li>
<li><a href="">Step Title 2<br /><small>Step Description 2</small></a></li>
<li><a href="">Step Title 3<br /><small>Step Description 3</small></a></li>
<li><a href="">Step Title 4<br /><small>Step Description 4</small></a></li>
<li><a href="">Step Title 5<br /><small>Step Description 5</small></a></li>
</ul>
<div>
<div id="step1">
Step Content 1
</div>
<div id="step2">
Step Content 2
</div>
<div id="step3">
Step Content 3
</div>
<div id="step4">
Step Content 4
</div>
<div id="step5">
Step Content 5
</div>
</div>
</div>
<a (click)="onClose()" class="btn btn-dark" style="margin-left: 5px;color:white;">Close</a>
I expected it to work but I am getting an error in console saying that “TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(…).smartWizard is not a function
at StartUpWizardComponent.ngOnInit” which I dont understand as after npm installing the smart wizard and importing. it should have been available to the component.