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.