I am new to fron-end development, I am trying to use angular 17 to open a modal of ngx-bootstrap library,
this is my component:

import { CommonModule } from '@angular/common';
import { Component, ElementRef, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-project-modal',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './project-modal.component.html',
  styleUrl: './project-modal.component.css'
})
export class ProjectModalComponent implements OnInit {

  modalRef?: BsModalRef;
  ngOnInit(): void {

  }

  constructor(private modalService: BsModalService){}


  openModal(template: TemplateRef<void>) {
    this.modalRef = this.modalService.show(template);
  }
}

and this is the html:

    <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<br>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">×</span>
    </button>
  </div>
  <div class="modal-body">
    <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus enim esse excepturi, impedit,
      iste magnam officia optio, quam quis quisquam saepe sint unde velit vitae! Animi in iusto ut?</p>
  </div>
</ng-template>

I tried it as mentioned in the official web site of ngx, although I have faced an issue during the installation using the following command :

ng add ngx-bootstrap

Therefore I followed the manual installation, but right now when I click on the open modal button nothing happening, any suggestion to how to do it, open a modal using ngx-bootstrap with angular 17, cause the problem seems to have something with 17 version, thanks in advance