带有 Bootstrap 5 的 Angular 13：如何以编程方式打开模式

Question

I am using Angular 13 and have included Bootstrap 5 in my project by linking to the CDN links like shown here:
https://getbootstrap.com/docs/5.0/getting-started/introduction/#css
and here:
https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle

Everything works fine as far as components are concerned, but I cannot find a way to open a modal programmatically. I don't won't to hide the modal using display: none/block , because this method doesn't include the animations that come with the component (like dropping from the top of the screen etc).

The component works fine if I use the button that triggers the behaviour, just like here https://getbootstrap.com/docs/5.0/components/modal/#live-demo

For now, my solution is to keep this button with display: none and trigger a manual click in my code, but this seems hacky to me.

Is there a way to achieve this without using ng-bootstrap?

EDIT:

Eliseo's comment seems to be in the right direction, by running npm install @types/bootstrap, vscode recognizes Modal from 'bootstrap'. However, running ng serve, gives me this error

Error: Module not found: Error: Can't resolve 'bootstrap' in ...

Answer 1

Using by ElementRef you can do this check this out.

<button #open type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade"   id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button #close  type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

.

export class AppComponent implements OnInit{
  @ViewChild('open',{read: ElementRef})closeRef!:ElementRef;
  @ViewChild('close',{read: ElementRef})modelRef!:ElementRef;
 
 
 ngOnInit(): void {
     
   setTimeout(() => {
    console.log('hua');
    
     this.closeRef.nativeElement.click()
   }, 100);
   setTimeout(() => {
    console.log('hua');
    
   
    this.modelRef.nativeElement.click()
   }, 10000);
 }
}