Rl-dialogs NPM

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.