Rxcomp-router NPM

💎 RxComp RouterModule

RxComp Router module for RxComp, developed with RxJs.

lib & dependancy	size
rxcomp-router.min.js
rxcomp-router.min.js
rxcomp.min.js
rxcomp.min.js
rxjs.min.js
rxjs.min.js

RxComp Router Demo
RxComp Router Api

npm.io

Installation and Usage

ES6 via npm

This library depend on RxComp and RxJs
install via npm or include via script

npm install rxjs rxcomp rxcomp-router --save

CDN

For CDN, you can use unpkg

<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js" crossorigin="anonymous" SameSite="none Secure"></script>
<script src="https://unpkg.com/rxcomp@1.0.0-beta.19/dist/umd/rxcomp.min.js" crossorigin="anonymous" SameSite="none Secure"></script>  
<script src="https://unpkg.com/rxcomp-router@1.0.0-beta.19/dist/umd/rxcomp-router.min.js" crossorigin="anonymous" SameSite="none Secure"></script>

The global namespace for RxComp is rxcomp

import { CoreModule, Module } from 'rxcomp';

The global namespace for RxComp RouterModule is rxcomp.router

Bootstrapping Module

import { Browser, CoreModule, Module } from 'rxcomp';
import { RouterModule } from 'rxcomp-router';
import AppComponent from './app.component';

export default class AppModule extends Module {}

AppModule.meta = {
  imports: [
    CoreModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: IndexComponent, data: { title: 'Dashboard' } },
      {
        path: 'detail/:detailId', component: DetailComponent, data: { title: 'Detail' },
        children: [
          { path: 'media', component: SubComponent, data: { title: 'Media' } },
          { path: 'files', component: SubComponent, data: { title: 'Files' } }
        ], canActivateChild: [customActivator],
      },
      { path: 'data/:data', component: DataComponent, data: { title: 'Data' } },
      { path: 'contacts', component: ContactsComponent, data: { title: 'Contacts' }, canActivate: [customActivator] },
      { path: '**', component: NotFoundComponent },
    ]),
  ],
  declarations: [
    IndexComponent,
    DataComponent,
    DetailComponent,
    ContactsComponent,
  ],
  bootstrap: AppComponent,
};

Browser.bootstrap(AppModule);

Location Strategy

You can change the default location strategy using the LocationStrategyHash class.

RouterModule.forRoot([
  { path: '', redirectTo: '/index', pathMatch: 'full' },
]).useStrategy(LocationStrategyHash),

Router events

You can subscribe to router events.

RouterService.observe$.pipe(
  tap((event: RouterEvent) => {
    if (event instanceof NavigationEnd
      || event instanceof NavigationCancel
      || event instanceof NavigationError) {
      console.log(event);
    }
  }),
  takeUntil(this.unsubscribe$),
).subscribe();

event name	description
NavigationStart	An event triggered when navigation starts.
RoutesRecognized	An event triggered when the Router parses the URL and the routes are recognized.
GuardsCheckStart	An event triggered at the start of the Guard phase of routing.
ChildActivationStart	An event triggered at the start of the child-activation part of the Resolve phase of routing.
ActivationStart	An event triggered at the start of the activation part of the Resolve phase of routing.
GuardsCheckEnd	An event triggered at the end of the Guard phase of routing.
ResolveStart	An event triggered at the the start of the Resolve phase of routing.
ResolveEnd	An event triggered at the end of the Resolve phase of routing.
ActivationEnd	An event triggered at the end of the activation part of the Resolve phase of routing.
ChildActivationEnd	An event triggered at the end of the child-activation part of the Resolve phase of routing.
RouteConfigLoadStart	An event triggered before the Router lazy loads a route configuration.
RouteConfigLoadEnd	An event triggered after a route has been lazy loaded.
NavigationEnd	An event triggered when navigation ends successfully.
NavigationCancel	An event triggered when navigation is canceled. This is due to a Route Guard returning false during navigation.
NavigationError	An event triggered when navigation fails due to an unexpected error.

Inspecting route

You can inspect the current activated route data$ or params$ from the host RouterOutlet.

export default class DetailComponent extends Component {
    host!: RouterOutletStructure;
    onInit() {
        this.host.route.data$.subscribe(data => {
          this.detailId = data.detailId;
        });
    }
    static meta: IFactoryMeta = {
        selector: '[detail-component]',
        hosts: { host: RouterOutletStructure },
        template: /* html */`
          <div class="title">Detail {{detailId}}</div>
        `,
    };
}

Route Guards

You can implement your custom route guards. There are four type of guards:
canDeactivate, canLoad, canActivate and canActivateChild.

export class UserLogged implements ICanActivate {
    canActivate(route: RouteSnapshot): RouterActivatorResult {
        return isLogged ? true : ['/login'];
    }
}

RouterModule.forRoot([
  { path: 'me', component: UserComponent, canActivate: [UserLogged] },
]),

View component

Extending the View component you obtain a new meta attribute transitions.
With this attribute you can create animations between the enter and leave state of a router view.
Just set an object with this custom properties enter:, leave:, from:a-custom-route-path, to:another-custom-route-path, once:.
Once method will be called only once.

export default class DetailComponent extends View {
	static meta: IViewMeta = {
		transitions: {
			'enter:': (node: IElement) => { ... },
			'leave:': (node: IElement) => { ... },
      'from:dashboard': (node: IElement) => { ... },      
			'to:dashboard': (node: IElement) => { ... },   
			'once:': (node: IElement) => { ... },
		}
	};
}

On these properties you can return these type of values:

Observable<void> | Promise<void> | (() => void) | void;

Transitions

To help you implement custom animations you can then use the transition$ observable that has a complete event.

import { transition$, View } from 'rxcomp-router';

export default class DetailComponent extends View {    
	static meta: IViewMeta = {
		transitions: {
			'enter:': (node: IElement) => transition$(complete => {
				gsap.set(node, { opacity: 0 });
				gsap.to(node, {
					opacity: 1,
					duration: 1,
					ease: Power3.easeInOut,
					onComplete: () => {
						complete(true);
					}
				});
			}),
		}
	};
}