test

src/app/pages/home/home-page.component.html

@@ -1,9 +1,9 @@
 <div class="ui-fluid">
-        <div class="ui-g">
-            <div class="ui-g-12">
-                <div class="card no-margin">
-                    <h1>Home works</h1>
-                </div>
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <div class="card no-margin">
+                <h1>Home works</h1>
             </div>
         </div>
     </div>
+</div>

src/app/pages/pages-animation.ts

@@ -0,0 +1,23 @@
+import {
+  trigger,
+  animate,
+  transition,
+  style,
+  query,
+  stagger,
+  keyframes
+} from '@angular/animations';
+
+export const fadeAnimation = trigger('fadeAnimation', [
+  transition('* => *', [
+
+    query(':enter', style({ opacity: 0 }), {optional: true}),
+
+    query(':enter', stagger('300ms', [
+      animate('.6s ease-in', keyframes([
+        style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
+        style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
+        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
+      ]))]), {optional: true})
+  ])
+]);

src/app/pages/pages-routing.module.ts

@@ -8,8 +8,8 @@ const routes: Routes = [
     component: PagesComponent,
     children: [
       { path: '', redirectTo: 'home' },
-      { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
-      { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule' },
+      { path: 'home', loadChildren: './home/home-page.module#HomePageModule', data: { animation: 'home'} },
+      { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule', data: { animation: 'probe'} },
       // { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },
       // { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
       // { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },

src/app/pages/pages.component.html

@@ -20,8 +20,8 @@
         <div class="layout-main">
             <of-breadcrumb></of-breadcrumb>
 
-            <div class="layout-content">
-                <router-outlet></router-outlet>
+            <div class="layout-content" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
+                <router-outlet #o="outlet"></router-outlet>
                 <of-footer></of-footer>
             </div>
             

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
 import { ScrollPanel } from 'primeng/primeng';
 import { Router } from '@angular/router';
-
+import { fadeAnimation } from './pages-animation';
 enum MenuOrientation {
   STATIC,
   OVERLAY,
@@ -12,7 +12,8 @@ enum MenuOrientation {
 @Component({
   selector: 'of-pages',
   templateUrl: './pages.component.html',
-  styleUrls: ['./pages.component.scss']
+  styleUrls: ['./pages.component.scss'],
+  animations: [ fadeAnimation ]
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   layoutCompact = true;
@@ -59,7 +60,8 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   rippleMouseDownListener: any;
 
-  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) { }
+  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) {
+  }
 
   ngOnInit() {
     if (this.isAuthRouteActivated()) {
@@ -323,6 +325,10 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
     themeLink.href = 'assets/theme/theme-' + theme + '.css';
     layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
-}
+  }
+
+  prepRouteState(outlet: any) {
+    return outlet.activatedRouteData['animation'] || 'firstPage';
+  }
 
 }

src/packages/probe/component/detail/detail.component.ts

@@ -30,7 +30,6 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
     private detailStore: Store<DetailStore.State>,
     private modifyStore: Store<ModifyStore.State>,
     private confirmationService: ConfirmationService,
@@ -88,7 +87,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
       icon: 'fa fa-trash',
       message: 'Are you sure to remove this Probe?',
       accept: () => {
-        this.router.navigate(['probes/list']);
+        // this.router.navigate(['probes/list']);
       },
       reject: () => {
       }

src/packages/probe/component/list/list.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core';
-import { Router } from '@angular/router';
-
 import { Store, select } from '@ngrx/store';
 
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
@@ -24,7 +22,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   @Output() select = new EventEmitter<Probe>();
 
   constructor(
-    private router: Router,
     private store: Store<ListStore.State>
   ) {
   }