rl-dialogs

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

Usage no npm install needed!

<script type="module">
  import rlDialogs from 'https://cdn.skypack.dev/rl-dialogs';
</script>

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.