README
@nowzoo/ngx-route-utils
Angular router utilities. A work in progress.
Install
npm i @nowzoo/ngx-route-utils --save
Quick Start
Import the module and call forRoot()
...
import { NgxRouteUtilsModule } from '@nowzoo/ngx-route-utils';
@NgModule({
imports: [
NgxRouteUtilsModule.forRoot()
]
})
export class AppModule { }
Route Utilities
NgxRouteUtils
A class with static helper methods for dealing with activated routes and router state.
API
urlFromRoute(route: ActivatedRoute | ActivatedRouteSnapshot): string
Given a route or snapshot, returns the full URL starting with/
static currentRouteSnapshots(router: Router): ActivatedRouteSnapshot[]
Returns an array of the first child route snapshots, from the root down.
Sign In Redirect
NgxSignInRedirectService
Stores a redirect url as a string in session storage for use once the user is signed in.
API
redirect: string|null
setRedirect(val: string|ActivatedRoute|ActivatedRouteSnapshot)
redirectOnSignIn(defaultRedirect = '/'): Promise<boolean>
Navigates to the stored redirect, and sets the stored redirect to null. If no stored redirect exists, navigates todefaultRedirect
Usage
export class SomeGuardedRouteComponent implements OnInit {
constructor(
private redirectService: NgxSignInRedirectService,
private router: Router,
private auth: SomeAuthService
)
ngOnInit() {
if (! this.auth.signedIn) {
this.redirectService.setRedirect(this.router.url);
this.router.navigate(['/sign-in']);
}
}
}
export class SignInRouteComponent implements OnInit {
constructor(
private redirectService: NgxSignInRedirectService,
private auth: SomeAuthService
)
submit(email, password) {
this.auth.signIn(email, password)
.then(() => [
this.redirectService.redirectOnSignIn();
])
}
}
Window Title
NgxWindowTitleService
Stores an application title and a route title, and sets the window title when one or both are changed.
API
appTitle: string|null
Getter/setter. On set, updates the window title.routeTitle: string|null
Getter/setter. On set, updates the window title.fullTitle: string
Getter. The full title, i.e.: the route title if set, the separator, the app title if set.
By default the separator string is ' | '
. You can change this in your app module by providing another string for NGX_WINDOW_TITLE_SEPARATOR
, for example:
import { NgxWindowTitleModule, NGX_WINDOW_TITLE_SEPARATOR } from '@nowzoo/ngx-route-utils';
// etc...
@NgModule({
imports: [
NgxRouteUtilsModule.forRoot(),
],
providers: [
{provide: NGX_WINDOW_TITLE_SEPARATOR, useValue: ' - '}
],
bootstrap: [AppComponent]
})
export class AppModule { }
//
Usage
export class AppComponent implements OnInit {
constructor(
private windowTitleService: NgxWindowTitleService
) {}
ngOnInit() {
this.windowTitleService.appTitle = 'My App';
}
}
export class SignInRouteComponent implements OnInit {
constructor(
private windowTitleService: NgxWindowTitleService
) {}
ngOnInit() {
this.windowTitleService.routeTitle = 'Sign In';
// window title is now "Sign In | My App"
}
}
Breadcrumbs
NgxRouteBreadcrumbsService
Stores an observable of an array of route breadcrumbs. You can use the service directly, or use the provided NgxRouteBreadcrumbsComponent
(see below.)
API
breadcrumbs: Observable<INgxRouteBreadcrumb[]>
registerBreadcrumb(route: ActivatedRoute|ActivatedRouteSnapshot, title: string)
Registers a breadcrumb.
INgxRouteBreadcrumb
Interface: url: string
title: string
NgxRouteBreadcrumbsComponent
A "dumb" component that displays the current breadcrumbs in the Bootstrap breadcrumb format.
Selector: ngx-route-breadcrumbs
Contributing
Contributions and suggestions are welcome.
Get started...
git clone git@github.com:nowzoo/ngx.git
cd ngx
npm i
ng build ngx-route-utils --prod
The library code is found in projects/ngx-route-utils
.
The demo site code is in src/app/ngx-route-utils
.
This library was built with the Angular CLI, so...
# test the library...
ng test ngx-route-utils
# build the library...
ng build ngx-route-utils --prod
# serve the demo site locally...
ng serve
Note that changes to the library code are not automatically reflected in the locally-served demo site. You must run ng build ngx-route-utils
whenever you make changes to the library. But the local server does watch for changes to the built library -- so you don't need to restart the server.
If you use Wallaby to run unit tests, select the projects/ngx-route-utils/wallaby.js
as your config file.