The modal does not close

Question

The parent is the /new-order component

When I click on confirm, the modal is displayed.

<div class="col-12">
  <button type="button" class="btn btn-primary m-1" (click)="openConfirmModal()">Confirmer</button>
</div>

The method is below:

openConfirmModal(): void {
    const modalRef = this.modalService.show(NewOrderConfirmModalComponent, {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: 'modal-dialog-centered modal-lg',
        ariaLabelledBy: 'modal-error-title',
        initialState: {
            orderToConfirm: this.order,
        }
    });
    modalRef.content!.closeModal.pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(() => {
        modalRef?.hide();
    });
}

enter image description here

enter image description here

Now, I am on the new-order-confirm-modal.component.html (chield)

In HTML I have this:

<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" click="close()"></button>

Here is my TS file

export class NewOrderConfirmModalComponent implements OnInit {
  @Input() orderToConfirm!:  Order;  
  private unsubscribe$ = new Subject<void>();
  @Output() closeModal = new EventEmitter<void>();

  
  constructor(
    public modal: BsModalRef,
    private router: Router,
    private location: Location,
    private service: NewOrderService
  ) { }
  
  ...
  
  close(): void {
    this.closeModal.emit();
  }

my problem is that when i want to close the modal and i click on the cross nothing happens...

EDIT

import { EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
export declare class BsModalRef<T = any> {
    /**
     * Event that is fired when the modal behind the ref starts hiding
     */
    onHide?: EventEmitter<unknown>;
    /**
     * Event that is fired when the modal behind the ref finishes hiding
     */
    onHidden?: EventEmitter<unknown>;
    /**
     *  Allow user to ID for the modal. Otherwise, a unique number will be given
     */
    id?: number | string;
    /**
     * Reference to a component inside the modal. Null if modal's been created with TemplateRef
     */
    content?: T;
    /**
     * Hides the modal
     */
    hide: () => void;
    /**
     * Sets new class to modal window
     */
    setClass: (newClass: string) => void;
    static ɵfac: i0.ɵɵFactoryDeclaration<BsModalRef<any>, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<BsModalRef<any>>;
}

Answer 1

"The button does not react to close the modal" because you have missed the parenthesis of click event, please add them, it will work.

<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="close()"></button>