angular-custom-modal
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

Angular Custom Modal

npm Version Build Status

Angular2+ Modal / Dialog (with inner component support).

A continuation of https://stackoverflow.com/a/46949848

Demo

zurfyx.github.io/angular-custom-modal

Install

npm install angular-custom-modal

Features

Core:

Minor:

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

Usage

app.module.ts

imports: [
  ...
  ModalModule,
  ...
],
...
})

Raw HTML

app.component.html

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

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>
<modal #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>
</modal>

Nested Modal

app.component.html

<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>
    <modal #nestedModalX>
      <ng-template #modalBody>This is the nested modal content.</ng-template>
    </modal>
  </ng-template>
</modal>

See example source code for more information.

Why ng-template?

ng-template prevents the parent component from initializing the component. Only when the modal library finds it convenient the component will be initialize and visible to the user. Hence, it preserves the natural ngOnInit() and ngOnDestroy() that we expect.

Similar libraries which make use of <ng-content> and its content transclution strategy, do not prevent the component from initializing, but rather just hide it. The component was already initialized in the parent component.

References:
https://angular.io/api/common/NgTemplateOutlet
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.

Default styles

You can find the demo copy-paste styles in modal.css.

Bootstrap

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

API

ModalComponent

Name Type Description
header @ContentChild('modalHeader'): TemplateRef Angular Template (<ng-template>) to use as header.
body @ContentChild('modalBody'): TemplateRef Angular Template (ng-template) to use as body.
footer @ContentChild('modalFooter'): TemplateRef Angular Template (ng-template) to use as footer.
closeOnOutsideClick @Input(): boolean = true When set to true modal will close when a click is performed outside the modal container.
open () => void Opens the modal.
close () => void Closes the modal.
isTopMost () => boolean Returns true is the modal is the top most modal, or false if it is underneath another modal.

Special thanks

To Stephen Paul for the initial Angular 2 Modal version.

License

MIT © Gerard Rovira Sánchez

Package Sidebar

Install

npm i angular-custom-modal

Weekly Downloads

266

Version

1.2.0

License

MIT

Unpacked Size

65.8 kB

Total Files

17

Last publish

Collaborators

  • zurfyx