# ng-dialog-router

> A small angular library that allows you to configure instances of @angular/material's MatDialog as part of your routing configuration.

Latest version **0.1.0** (published 2019-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-dialog-router
pnpm add ng-dialog-router
yarn add ng-dialog-router
bun add ng-dialog-router
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-03-01 |
| First published | 2019-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 100.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Ante Grgić |
| Maintainers | ante16 |
| Keywords | angular, @angular, @angular/material, angular/router, ng, dialog, modal, router, routing, material, mat-dialog, ng-dialog-router |

## Links

- npm: https://www.npmjs.com/package/ng-dialog-router
- Repository: https://github.com/agrgic16/ng-dialog-router
- Homepage: https://github.com/agrgic16/ng-dialog-router#readme
- Issues: https://github.com/agrgic16/ng-dialog-router/issues
- npm.io page: https://npm.io/package/ng-dialog-router

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-03-01
- 0.0.6 — 2019-02-26
- 0.0.5 — 2019-02-25
- 0.0.4 — 2019-02-25
- 0.0.3 — 2019-02-25
- 0.0.2 — 2019-02-25
- 0.0.1 — 2019-02-25

## README

# ng-dialog-router

A small angular library that allows you to configure instances of @angular/material's MatDialog as part of your routing configuration.

## Getting Started
In your angular app, run `npm install ng-dialog-router --save` OR `yarn add ng-dialog-router`

### Prerequisites
Starting from scratch, please do the following:
- Generate Angular App Using [Angular CLI](https://cli.angular.io/)
- Install Angular Material by running `npm install @angular/material --save` OR `yarn add @angular/material`
- Install ng-dialog-router by running `npm install ng-dialog-router --save` OR `yarn add ng-dialog-router`
- Finally, in src/styles.scss, import the Angular Material core styles as `@import "~@angular/material/prebuilt-themes/indigo-pink.css";`

### Usage

#### Essentials
ng-dialog-router simply uses an angular route resolver to convert your
normal route configuration into one that is displayed in a dialog.

It should be provided to the `dlgRef` resolve property.

```ts
import { DialogResolverService } from 'ng-dialog-router';
import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';

const route = {
    path: '0',
    component: SampleDialogComponent,
    resolve: { dlgRef: DialogResolverService },
}
```

#### Managing the dialog config settings
The typical angular material options can be passed to the `dlg` property of the route `data`.
The Angular Material Dialog documentation can be found here [Angular Material Dialog](https://material.angular.io/components/dialog/overview).
```ts
import { DialogResolverService, DialogRouteConfig } from 'ng-dialog-router';
import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';

const route = {
    path: '0',
    component: SampleDialogComponent,
    resolve: { dlgRef: DialogResolverService },
    data: {
        dlg: {
            data: { name: 'Sample Dialog #a.0' },
            position: { left: '0' },
            width: '500px',
        } as DialogRouteConfig,
    },
}
```

#### Additional config settings provided by this library

For best results, using the strongly typed `DialogRouteConfig` interface for the `route.data.dlg` property
is recommended via the `as DialogRouteConfig` syntax.

##### `redirectPath: string[]`
By default, when the dialog is closed it will redirect up one level in the url tree.
So if we are at `/home/0/a` it will navigate back to `/home/0`. ng-dialog-router has an additional
option to allow for a custom redirect path, in case we want the dialog to go back to `/home`
upon closing via the property `redirectPath`.

```ts
const route = {
    path: '0',
    component: SampleDialogComponent,
    resolve: { dlgRef: DialogResolverService },
    data: {
        dlg: {
            data: { name: 'Sample Dialog #a.0' },
            position: { left: '0' },
            width: '500px',
            redirectPath: [ 'home' ],
        } as DialogRouteConfig,
    },
}
```

### Full Usage Example (implemented in app's routing module)

#### app/routing/routes.ts
```ts
import { Routes } from '@angular/router';
import { DialogResolverService, DialogRouteConfig } from 'ng-dialog-router';
import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';
import { HomeComponent } from '../home/home.component';

export const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        children: [
            {
                path: '0',
                component: SampleDialogComponent,
                resolve: { dlgRef: DialogResolverService },
                data: {
                    dlg: {
                        data: { name: 'Sample Dialog #a.0' },
                        position: { left: '0' },
                        redirectPath: ['home'],
                        width: '500px',
                    } as DialogRouteConfig,
                },
            },
        ],
    },
];
```

#### app/routing/routing.module.ts
```ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DialogRouterModule } from 'ng-dialog-router';
import { routes } from './routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    DialogRouterModule,
  ],
  exports: [
    RouterModule,
    DialogRouterModule,
  ]
})
export class RoutingModule { }

```

## Built With
* [Angular CLI](https://cli.angular.io/)
* [Angular Material](https://material.angular.io/)

## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/agrgic16/ng-dialog-router/tags).

## Authors
* **Ante Grgić** - *Initial work* - [GitHub](https://github.com/agrgic16)

## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

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