Routing transition between 2 components without destroying first one?

after searching for a whole day i’am stuck so i would like to ask for some help.

How can i achieve something like this in angular2:

what i mean is how to seamlessly transition between 2 pages using Router ?
i can animate page change, but it’s like this right now:

animation-in->first page loaded->animation-out->empty router outlet(as component is destroyed)->animation-in->second page loaded

but i would like to have:

animation-in->first page loaded->animation-out of first page->animation-in of second page->second page loaded->and here destroy first page

any help would be appriciated 🙂

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

ok, so i got it working, if anyone is interested, here’s my solution – any pointers to better one are welcome as i’am noob in angular world 🙂 public activate(nextInstruction: ComponentInstruction): Promise<any> { let previousInstruction = this.currentInstruction; this.currentInstruction = nextInstruction; let componentType = nextInstruction.componentType; let childRouter = this.parentRouter.childRouter(componentType); let providers = ReflectiveInjector.resolve([ provide(RouteData, {useValue: nextInstruction.routeData}), provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}), provide(routerMod.Router, {useValue: childRouter}) ]); this.previousComponentRef = this.currentComponentRef; return this.loader.loadNextToLocation(componentType, this.currentElementRef, providers) .then((componentRef) => { this.currentComponentRef = componentRef; Observable.of(true).delay(100).toPromise().then(response => { if(this.previousComponentRef){ this.previousComponentRef.location.nativeElement.className = 'animateout'; } this.currentComponentRef.location.nativeElement.className = 'animatein'; }); if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) { return (<OnActivate>componentRef.instance) .routerOnActivate(nextInstruction, previousInstruction); } }); } public… Read more »