Naughty Pinching Mannequins

    @nowzoo/ngx-route-utils
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    @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 to defaultRedirect

    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.

    Interface: INgxRouteBreadcrumb

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

    License

    MIT

    Keywords

    none

    Install

    npm i @nowzoo/ngx-route-utils

    DownloadsWeekly Downloads

    2

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    277 kB

    Total Files

    39

    Last publish

    Collaborators

    • chriscarson