how to use smart wizard with angular

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>