The main component responsible for initiating the process is /new-order.
Upon clicking on the confirm button, a modal window appears.
<div class="col-12">
<button type="button" class="btn btn-primary m-1" (click)="openConfirmModal()">Confirm</button>
</div>
Here is the function used to open the modal:
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();
});
}
Now, let's shift focus to the child component -
new-order-confirm-modal.component.htmlThe corresponding HTML code is as follows:
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" click="close()"></button>
Below is the TypeScript file associated with this component:
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();
}
An issue arises when attempting to close the modal by clicking on the "X" button...
EDIT
import { EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
export declare class BsModalRef<T = any> {
/**
* Event triggered when the modal behind the reference begins to hide
*/
onHide?: EventEmitter<unknown>;
/**
* Event triggered upon completion of hiding the modal behind the reference
*/
onHidden?: EventEmitter<unknown>;
/**
* Allows user to provide an ID for the modal, else a unique number is assigned
*/
id?: number | string;
/**
* Reference to a component inside the modal. Null if modal was created with TemplateRef
*/
content?: T;
/**
* Hides the modal
*/
hide: () => void;
/**
* Sets a new class name for the modal window
*/
setClass: (newClass: string) => void;
static ɵfac: i0.ɵɵFactoryDeclaration<BsModalRef<any>, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<BsModalRef<any>>;
}