Fix scroll to top when navigating in demo-app

appveyor.yml

@@ -17,7 +17,7 @@ install:
   - yarn build
   - npm pack
   - 7z x ng2-materialize-*.tgz && 7z x ng2-materialize-*.tar
-  - cd package && yarn unlink && yarn link && cd ..
+  - cd package && yarn link && cd ..
   - cd demo-app
   - yarn install --frozen-lockfile --no-progress
   - yarn link ng2-materialize
@@ -27,10 +27,11 @@ test_script:
   - npm --version
   - yarn --version
   - yarn lint
-  - yarn build:prod --progress false
+  - yarn build:prod --no-progress
 
 after_test:
   - yarn unlink ng2-materialize
+  - cd.. && cd package && yarn unlink
 
 build: off
 

circle.yml

@@ -20,8 +20,8 @@ test:
     - mkdir $CIRCLE_TEST_REPORTS/karma
     - mkdir $CIRCLE_TEST_REPORTS/lint
   override:
-    - yarn test -- --single-run
-    - yarn lint -- --formatters-dir ./tslint-formatters --format junit -o $CIRCLE_TEST_REPORTS/lint/tslint.xml
+    - yarn test --single-run --no-progress
+    - yarn lint --formatters-dir ./tslint-formatters --format junit -o $CIRCLE_TEST_REPORTS/lint/tslint.xml
     - yarn build
   post:
     - mv test-results.xml $CIRCLE_TEST_REPORTS/karma

demo-app/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import 'rxjs/add/operator/filter';
 
-import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, Renderer, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { NavigationEnd, Route, Router } from '@angular/router';
 import { MzSidenavComponent } from 'ng2-materialize';
 import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';
@@ -23,8 +23,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
   constructor(
     private router: Router,
-    private renderer: Renderer,
-    private elementRef: ElementRef,
     private mScrollbarService: MalihuScrollbarService,
   ) { }
 
@@ -72,10 +70,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   setNavigationEndEvent() {
     // scroll to top on each route change
     this.router.events
-      .filter((event) => event instanceof NavigationEnd)
-      .subscribe((event: NavigationEnd) => {
-        const parentElement = this.elementRef.nativeElement.parentElement;
-        this.renderer.setElementProperty(parentElement, 'scrollTop', 0);
-      });
+      .filter(event => event instanceof NavigationEnd)
+      .subscribe(() => window.scrollTo(0, 0));
   }
 }

demo-app/src/app/app.routing.ts

@@ -1,5 +1,3 @@
-// tslint:disable:max-line-length
-
 import { Routes } from '@angular/router';
 
 import { HomeComponent } from './home/home.component';
@@ -12,12 +10,12 @@ const loading = 'Loading';
 const indicator = 'Indicators';
 const service = 'Services';
 
+// tslint:disable:max-line-length
 export const ROUTES: Routes = [
   // home route
   { path: 'home', loadChildren: './home/home.module#HomeModule' },
 
   // components routes - CSS
-  /* tslint:disable:max-line-length */
   { path: 'materialize-css-class', loadChildren: './materialize-css-class/materialize-css-class.module#MaterializeCssClassModule', data: { icon: 'language-css3', text: 'Materialize CSS Class', section: css } },
 
   // components routes - Form controls
@@ -32,7 +30,7 @@ export const ROUTES: Routes = [
   { path: 'textarea', loadChildren: './textarea/textarea.module#TextareaModule', data: { icon: 'cursor-text', text: 'Textarea', section: formControls } },
   { path: 'timepicker', loadChildren: './timepicker/timepicker.module#TimepickerModule', data: { icon: 'clock', text: 'Timepicker', section: formControls } },
 
-  // // components routes - Layout
+  // components routes - Layout
   { path: 'card', loadChildren: './card/card.module#CardModule', data: { icon: 'cards-outline', text: 'Card', section: layout } },
   { path: 'collapsible', loadChildren: './collapsible/collapsible.module#CollapsibleModule', data: { icon: 'view-carousel', class: 'rotate90', text: 'Collapsible', section: layout } },
   { path: 'collection', loadChildren: './collection/collection.module#CollectionModule', data: { icon: 'view-sequential', text: 'Collection', section: layout } },
@@ -43,17 +41,17 @@ export const ROUTES: Routes = [
   { path: 'sidenav', loadChildren: './sidenav/sidenav.module#SidenavModule', data: { icon: 'menu', text: 'Sidenav', section: layout } },
   { path: 'tab', loadChildren: './tab/tab.module#TabModule', data: { icon: 'tab', text: 'Tab', section: layout } },
 
-  // // components routes - Loading
+  // components routes - Loading
   { path: 'progress', loadChildren: './progress/progress.module#ProgressModule', data: { icon: 'timer-sand', text: 'Progress', section: loading } },
   { path: 'spinner', loadChildren: './spinner/spinner.module#SpinnerModule', data: { icon: 'reload', text: 'Spinner', section: loading } },
 
-  // // components routes - Indicator
+  // components routes - Indicator
   { path: 'badge', loadChildren: './badge/badge.module#BadgeModule', data: { icon: 'numeric-2-box-outline', text: 'Badge', section: indicator } },
   { path: 'icon', loadChildren: './icon/icon.module#IconModule', data: { icon: 'emoticon-happy', text: 'Icon', section: indicator } },
   { path: 'toast', loadChildren: './toast/toast.module#ToastModule', data: { icon: 'tooltip-text', text: 'Toast', section: indicator } },
   { path: 'tooltip', loadChildren: './tooltip/tooltip.module#TooltipModule', data: { icon: 'tooltip', text: 'Tooltip', section: indicator } },
 
-  // // components routes - Service
+  // components routes - Service
   { path: 'media', loadChildren: './media/media.module#MediaModule', data: { icon: 'monitor', text: 'Media', section: service } },
 
   // redirect to home when route does not exists (must be last route)