Noodles Practicing Medicine

    rl-dialogs
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    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.

    Install

    npm i rl-dialogs

    DownloadsWeekly Downloads

    8

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    269 kB

    Total Files

    35

    Last publish

    Collaborators

    • roman.litvinov