# rl-dialogs

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

Latest version **2.0.1** (published 2021-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install rl-dialogs
pnpm add rl-dialogs
yarn add rl-dialogs
bun add rl-dialogs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-08-15 |
| First published | 2020-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 263.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Roman Litvinov |
| Maintainers | roman.litvinov |
| Keywords | rl-dialogs, angular, angular9, angular10, angular11, dialogs, typescript |

## Links

- npm: https://www.npmjs.com/package/rl-dialogs
- npm.io page: https://npm.io/package/rl-dialogs

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.2.0
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^3.0.3
- [ng-click-outside](https://npm.io/package/ng-click-outside.md) ^9.0.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2021-08-15
- 2.0.0 — 2021-08-15
- 1.0.3 — 2021-01-06
- 1.0.2 — 2021-01-04
- 1.0.1 — 2021-01-04
- 1.0.0 — 2021-01-04
- 0.0.6 — 2020-02-02
- 0.0.5 — 2020-02-01
- 0.0.4 — 2020-02-01
- 0.0.3 — 2020-02-01
- 0.0.2 — 2020-02-01

## 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.

---
_Source: https://npm.io/package/rl-dialogs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._