diff --git a/ng-sample/app/examples/router/router-outlet-test.ts b/ng-sample/app/examples/router/router-outlet-test.ts
index 8855546a0..f5196b187 100644
--- a/ng-sample/app/examples/router/router-outlet-test.ts
+++ b/ng-sample/app/examples/router/router-outlet-test.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, OnDestroy } from "@angular/core";
import { RouterConfig, ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
-import { NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router"
+import { NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router";
@Component({
selector: "first",
diff --git a/tests/app/snippets/navigation/navigation-common.ts b/tests/app/snippets/navigation/navigation-common.ts
index 432fbc206..f85434dfa 100644
--- a/tests/app/snippets/navigation/navigation-common.ts
+++ b/tests/app/snippets/navigation/navigation-common.ts
@@ -23,23 +23,4 @@ export class FirstComponent { }
`
})
export class SecondComponent { }
-// << router-content-components
-
-
-// >> router-location-back
-import {Location} from '@angular/common';
-
-@Component({
- // ...
- // >> (hide)
- template: '', selector:"go-back"
- // << (hide)
-})
-export class MyComponent {
- constructor(private location: Location) { }
-
- public goBack() {
- this.location.back();
- }
-}
-// << router-location-back
+// << router-content-components
\ No newline at end of file
diff --git a/tests/app/snippets/navigation/router-extensions.html b/tests/app/snippets/navigation/router-extensions.html
new file mode 100644
index 000000000..0a00fb05f
--- /dev/null
+++ b/tests/app/snippets/navigation/router-extensions.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/app/snippets/navigation/router-extensions.ts b/tests/app/snippets/navigation/router-extensions.ts
new file mode 100644
index 000000000..ff0d5ac44
--- /dev/null
+++ b/tests/app/snippets/navigation/router-extensions.ts
@@ -0,0 +1,80 @@
+import {Component} from "@angular/core";
+import {nativeScriptBootstrap} from 'nativescript-angular/application';
+import {NS_ROUTER_DIRECTIVES } from 'nativescript-angular/router';
+import {nsProvideRouter} from 'nativescript-angular/router';
+import {RouterConfig} from '@angular/router';
+
+
+import { RouterExtensions } from 'nativescript-angular/router';
+
+@Component({
+ // ...
+ // >> (hide)
+ selector: "router-extensions-import",
+ directives: [NS_ROUTER_DIRECTIVES],
+ templateUrl: 'snippets/navigation/router-extensions.html'
+ // << (hide)
+})
+export class MyComponent {
+ constructor(private routerExtensions: RouterExtensions) { }
+
+ // >> router-clear-history-code
+ login() {
+ // app logic here ...
+ this.routerExtensions.navigate(["/main"], { clearHistory: true });
+ }
+ // << router-clear-history-code
+
+ // >> router-back
+ public goBack() {
+ this.routerExtensions.back();
+ }
+ // << router-back
+
+ // >> router-page-back
+ public goBackPage() {
+ this.routerExtensions.backToPreviousPage();
+ }
+ // << router-page-back
+
+ // >> router-page-transition-code
+ flipToNextPage() {
+ this.routerExtensions.navigate(["/main"], {
+ transition: {
+ name: "flip",
+ duration: 2000,
+ curve: "linear"
+ }
+ });
+ }
+ // << router-page-transition-code
+}
+
+// >> router-extensions-import
+@Component({
+ // ...
+ // >> (hide)
+ selector: 'component',
+ template: ``
+ // << (hide)
+})
+export class MainComponent {
+ constructor(private routerExtensions: RouterExtensions) {
+ // ...
+ }
+}
+// << router-extensions-import
+
+@Component({
+ selector: 'application',
+ directives: [NS_ROUTER_DIRECTIVES],
+ template: ""
+})
+export class App { }
+
+const routes: RouterConfig = [
+ { path: "", component: MyComponent },
+ { path: "main", component: MainComponent },
+];
+
+export const providers = nsProvideRouter(routes, {});