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.