Package Exports

rl-dialogs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rl-dialogs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RL Dialogs

This library is used to display custom Angular components as a dialog in Angular 12+ applications.

Installation

The library can be installed via npm:

npm install rl-dialogs --save

Usage

Add DialogsModule to your Angular module imports:

import { DialogsModule } from 'rl-dialogs'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DialogsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dialog Anchor

Place the dialog anchor in the root of your app (app.component for example):

<div *rlDialogsAnchor></div>

Custom Dialog

To render your custom component as a dialog, create a new Angular component and extend it from the base dialog class DialogComponent. The base class provides all the required functionality to show/hide the dialog, set animation duration and so on. As result, you only need to implement the component template.

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class Dialog extends DialogComponent {

  constructor(protected dialogRef: ElementRef) {
    super(dialogRef)
  }

}

Dialog component API

Properties

Property	Type	Default	Description
`animationDuration`	number	`700`	Duration of the dialog show/hide animation in milliseconds. Use setAnimationDuration to set the duration after a dialog is created.
`position`	DialogPosition	`DialogPosition.Center`	Dialog position on the screen. The possible options are `DialogPosition.Left, DialogPosition.Right, DialogPosition.Center`
`data`	any	`null`	Data which can be passed to the dialog. Accessible after the dialog creation, so you should use `NgOnInit` lifecycle hook to initialize your component with a given data

Methods

Method	Description
`setAnimationDuration`	Sets the show/hide dialog animation duration in milliseconds
`hide`	Hides the dialog

Show a dialog using DialogsService

Use DialogsService.show() method to show the dialog:

dialogService.show<DialigOutputData>(id: string, dialogType: Type<IDialog>, data: any, options: IDialogOptions, injector: Injector): Promise<DialigOutputData | undefined>

Options

Property	Type	Required	Description
`id`	string	true	Dialog ID. Can be generated using the static method `DialogComponent.generateId()`
`dialogType`	Type	true	Dialog position on the screen. The possible options are `DialogPosition.Left, DialogPosition.Right, DialogPosition.Center`
`data`	any	false	Data which can be passed to the dialog. Accessible after the dialog creation, so you should use `NgOnInit` lifecycle hook to initialize your component with a given data
`options`	IDialogOptions	false	Dialog options, see the description below
`injector`	Injector	false	Angular Injector. Can be provided to override a dialog dependencies

IDialogOptions

Property	Type	Default	Description
`overlay`	boolean	`false`	Defines whether to display dialog overlay or not.
`position`	DialogPosition	`DialogPosition.Center`	Dialog position on the screen. The possible options are `DialogPosition.Left, DialogPosition.Right, DialogPosition.Center`
`closeOnClickOutside`	boolean	`false`	Defines whether a dialog should be closed on click outside or not

Close a dialog using DialogsService

To close a dialog using the service:

dialogService.close(id: string)

Close all the open dialogs using DialogsService

To close a dialog using the service:

dialogService.closeAll()

Overlay Customization

You can override the overlay class rl-overlay to customize the background color or other CSS properties.

Scrolling inside the dialog (iOS)

To disable body scrolling on iOS, the library prevents touchmove events, so scrolling on a child element in the dialog is also disabled. To enable scrolling on a child element in iOS, apply rl-dialog-scrollable class to the element.