i created a bootstrap modal using angular 13 but opening it will freeze the whole app (i have ng bootstrap)

Question

header.component.ts code

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent{

  constructor(private modalService: NgbModal) {}
  open(content: any) {
    this.modalService.open(content)
  }

}

header.component.html code

<ng-template #content let-modal>
  <div class="modal-dialog ">
    <h4 class="modal-title" id="modal-basic-title">Sign up</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <form>
      <div class="mb-3">
        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" class="form-control" placeholder="name*" name="name">
          <label for="Email">Email</label>
          <input id="Email" class="form-control" placeholder="Email*" name="Email">
          <label for="pwd">Password</label>
          <input id="pwd" class="form-control" placeholder="name*" name="pwd">
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">sign up</button>

the whole project freezed all i can do is refresh i tried removing positioning but it doesnt work

this discribes the problem