angular-modal-patterns

Create a component extending AppComponentBase that uses AppBsModalDirective with a viewChild reference to ModalDirective. Manage state with signals for active, saving, and the entity DTO, then expose show() and close() methods for the parent component.

Bind the input with [ngModel]="dto.dateField?.toISODate()" and convert the string back using DateTime.fromISO(value) in the change handler. Do not use Angular's date pipe with Luxon DateTime values, as it causes a TS2769 type error.

Use AppBsModalDirective (appBsModal) rather than plain ngx-bootstrap bsModal. It is the ASP.NET Zero convention, paired with a template reference like #createOrEditModal="bs-modal" and a static backdrop configuration.

NSwag generates DateTime fields as Luxon DateTime objects, not native JavaScript Date objects, so Angular's DatePipe rejects them with a TS2769 error. Use the LuxonFormatPipe or .toLocaleString() for display instead.

Declare the modal in the parent template and bind its modalSave output to a refresh method like getProducts(). In the parent class, use viewChild to get the modal component and call show() or show(id) for create and edit actions.