@ngx-popovers/dialog

Dialog

This library was created using Nx and floating-ui for Angular apps.

Check out the Demo

To use, install the package using the following command:

npm i @ngx-popovers/dialog

Usage

The dialog component provides a simple way to display dialog elements.

<ngx-dialog>
  <button ngx-dialog-trigger>
    Toggle
  </button>

  <ng-template ngx-dialog-template>
    <div class="modal-box">
      <p class="text-2xl">Hello! I am Dialog</p>
      <p>
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
      </p>

      <button ngx-dialog-close>
        Close
      </button>
    </div>
  </ng-template>
</ngx-dialog>

ngx-dialog-trigger

You can include multiple components inside the <ngx-dialog />.

The ngxDialogTrigger directive can be used to set the trigger button inside <ngx-dialog /> as default.

<ngx-dialog>
  <!-- 
    The dialog opens when 
    the button[ngx-dialog-trigger] is clicked 
  -->
  <button ngx-dialog-trigger>
    Toggle
  </button>

  <ng-template ngx-dialog-template>
    <div class="dialog-box">
      <p>Dialog content</p>
    </div>
  </ng-template>
</ngx-dialog>

ngx-dialog-template

The NgxDialogTemplate directive helps locate the template for the dialog.

<ngx-dialog [value]="true">
  <!-- 
    Angular doesn't destroy elements in <ng-content />, so
    the DialogTemplate directive is used for conditional content projection.
    
    https://angular.io/guide/content-projection#conditional-content-projection
  -->
  <ng-template ngx-dialog-template>
    <div class="dialog-box">
      <p>Dialog content</p>
    </div>
  </ng-template>
</ngx-dialog>

ngx-dialog-close

The NgxDialogClose directive closes the dialog when a click event is detected on the specified element.

<ngx-dialog [value]="true">
  <ng-template ngx-dialog-template>
    <div class="dialog-box">
      <p>Dialog content</p>

      <!-- 
        The dialog will close when 
        button[ngx-dialog-close] is clicked 
      -->
      <button ngx-dialog-close>Close</button>
    </div>
  </ng-template>
</ngx-dialog>

API

Input Parameters

Input	Description	Type	Default
closeOnBackdropClick	Close dialog when clicking backdrop	boolean	true
backdropClass	Class for the backdrop element	string	''
contentClass	Class for the dialog wrapper element	string	''
animationDisabled	Disable show/hide animations	boolean	false
value	Show or hide dialog	boolean	false

Output Parameters

Output	Description	Type
valueChange	Emits when value changes	EventEmitter<boolean>
show	Emits when the popover shows	EventEmitter
hide	Emits when the popover hides	EventEmitter
animationStart	Emits when animation starts	EventEmitter<AnimationEvent>
animationDone	Emits when animation ends	EventEmitter<AnimationEvent>

Configuration

There is a configuration token NGX_DIALOG_CONFIG. Use the NgxDialogConfig class to change default properties.

import { Provider } from '@angular/core';
import { NGX_DIALOG_CONFIG, NgxDialogConfig } from '@ngx-popovers/dialog';

export const DialogConfigProvider: Provider = {
  provide: NGX_DIALOG_CONFIG,
  useValue: new NgxDialogConfig({
    backdropClass: 'backdrop',
    contentClass: 'content',
    closeOnBackdropClick: false,
    animationDisabled: false
  })
};

Sources

Other npm packages from this library:

• core
• tooltip
• popover