Bootstrap modal not working in Angular application

I am trying to use a Bootstrap modal in an Angular application using classes in HTML, but it not working - its not showing as a modal

<div class="modal text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title fw-normal">Basic dialogue title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-light fa-circle-xmark"></i>
</button>
</div>
<div class="modal-body f-14">
<p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
</p>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
<button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
</div>
</div>
</div>
</div>

Continue reading...