ngx-custom-modal-events v18.0.0

ngx-custom-modal-events

A custom Modal / Dialog (with inner component support) and close/open events.

ngx-custom-modal-events is an enhanced continuation of the popular ngx-custom-modal package. It builds upon the original functionality by introducing additional event hooks and parameter handling, making it easier to integrate modal behaviors within your Angular applications.

Angular compatibility

Install

npm install ngx-custom-modal-events

Features

Core Features with Angular 17 Standalone Components:

• Light: No additional CSS/JS frameworks attached.
• Bootstrap 3 & 4 CSS Compatible: Ensures seamless integration with these versions of Bootstrap.
• Custom Modal Components:
  • Customizable modal headers, bodies, and footers for tailored UI design.
• Modal Stacking Support: Allows multiple modals to be opened and managed effectively.
• Lazy Inner Component Initialization: Components within modals are initialized only as needed.
• Efficient Lifecycle Management: Inner components are destroyed (ngOnDestroy) when the modal is closed, ensuring resource efficiency.

Minor:

• Optional CSS animations
• Optional parent scrolling when modal is visible
• Escape or button to close modal

Usage

imports: [
  ...
  NgxCustomModalComponentEvents,
  ...
],

Raw HTML

app.component.html

<button (click)="htmlInsideModal.open()">Raw HTML inside modal</button>
<ngx-custom-modal-events #htmlInsideModal>
  <ng-template #modalHeader><h2>HTML inside modal</h2></ng-template>
  <ng-template #modalBody>
    <p>HTML content inside modal</p>
  </ng-template>
</ngx-custom-modal-events>

Component inside Modal

my-component.component.ts

@Component({ selector: 'app-my-component', templateUrl: 'my-component.component.html', }) export class
AppModalContentComponent { }

my-component.component.html

<p>My component's HTML</p>

app.component.html

<button (click)="componentInsideModal.open()">Component inside modal</button>
<ngx-custom-modal-events #componentInsideModal>
  <ng-template #modalHeader><h2>Component inside modal</h2></ng-template>
  <ng-template #modalBody>
    <app-my-component></app-my-component>
  </ng-template>
  <ng-template #modalFooter></ng-template>
</ngx-custom-modal-events>

Nested Modal

app.component.html

<ngx-custom-modal #nestedModal>
  <ng-template #modalHeader><h2>Nested modal</h2></ng-template>
  <ng-template #modalBody>
    Nested modals can be created by simply adding a &lt;modal&gt; inside a &lt;modal&gt; ...
    <button (click)="nestedModalX.open()">Open nested modal</button>
    <ngx-custom-modal-events #nestedModalX>
      <ng-template #modalBody>This is the nested modal content.</ng-template>
    </ngx-custom-modal-events>
  </ng-template>
</ngx-custom-modal>

Close/Open event subscriptions

The following code snippet demonstrates how to subscribe to the onClose event within a component inside a modal. When the modal is closed, the onClose/onOpen event is triggered, optionally passing data related to the modal's closure. In this example, the subscribed function logs a message along with the received data to the console.

@ViewChild('myModal') componentModal: NgxCustomModalEventsComponent;
...
this.componentModal.onOpen().subscribe(() => {
  console.log('Opened modal');
});
this.componentModal.onClose().subscribe(data => {
  console.log('Closed modal', data);
});

Custom Classes and Options

You can now apply custom CSS classes, use an options object for flexible configuration, and hide the close button.

Custom CSS Classes

To apply custom CSS classes to the modal:

<ngx-custom-modal-events #customClassModal customClass="my-custom-class">
  <ng-template #modalHeader><h2>Custom Class Modal</h2></ng-template>
  <ng-template #modalBody>
    <p>This modal has a custom CSS class.</p>
  </ng-template>
</ngx-custom-modal-events>

References: https://github.com/AngelCareaga/ngx-custom-modal https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

Styles

The library carries the minimum generic styles. Beautifying it is up to you.

Bootstrap

Bootstrap users require no additional CSS other than the Bootstrap library (either version 3 or 4).

API

ModalComponent

Special Thanks

ngx-custom-modal-events is a continuation of ngx-custom-modal by Angel Careaga. It was inspired by and built upon the foundational work of angular-custom-modal, created by Gerard Rovira Sánchez. A special acknowledgment goes to Stephen Paul for his initial initial Angular 2 Modal version, which laid the groundwork for these modal dialog implementations in Angular.