agrgic16 / ng-dialog-router

Library for configuring @angular/material dialogs via @angular/router config

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

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.

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.

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

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

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
• Angular Material

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Ante Grgić - Initial work - GitHub

License

This project is licensed under the MIT License - see the LICENSE.md file for details

ng-dialog-router's Issues

Upgrade to Angular v8

Is your feature request related to a problem? Please describe.
I want this library to use the latest version of Angular.

Describe the solution you'd like
Package upgraded to version 8 and verified working. Remove any deprecated implementations.

Describe alternatives you've considered
No alternatives.

Additional context
No additional context.

update readme.md with usage instructions

also update library build scripts to copy main application readme.md into the lib build output

add support for `redirectPath` option in route data

Allow the user to define a custom redirect path to navigate to after the dialog is closed

Add `replaceUrl` config documentation to usage instructions in readme

Need to have clear documentation.

The solution should mimic the existing custom dialog config documentation in readme.md

Add travis CI integration

Need to add a .travis.yml file to configure CI

add support for `replace` option in route data

This will be used to indicate whether the dialog should replace or push history upon closing