Onclick image to move another page is not working - angular2-routing

Question

I'm new to nativescript. I'm navigation from Alert page to
Naviagation page. I have posted all relevant codes.please check it.
I'm not getting any issue.When performing image onClick I'm able to call this method onNotification().
I'm able to see this console log in command prompt
console.log("SteveCheck", "Test");
But I don't know, Why it is not moving to notification page when
click on the button in alert page.Below I have added all the relevant codes.
app.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AlertComponent } from "./AlertFolder/alert.component";
import { NativeScriptRouterModule } from "nativescript-angular/router"
import {AppRoutes, AppComponents } from "./app.routing";
#NgModule({
declarations: [AlertComponent, ...AppComponents],
bootstrap: [AlertComponent],
imports: [
NativeScriptModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(AppRoutes)
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
app.routing.ts:
import { AlertComponent } from "./AlertFolder/alert.component";
import { NotificationComponent } from "./Noficiation/notification";
export const AppRoutes:any = [
{ path: "", component: AlertComponent },
{ path: "NotificationPage", component: NotificationComponent}
];
export const AppComponents: any = [
AlertComponent,
NotificationComponent
];
alert.component.ts:
#Component({
selector: "sdk-child-component",
moduleId: module.id,
....
})
export class AlertComponent {
.....
.....
public constructor(private router: Router, private routerExtensions: RouterExtensions){
this.alertList = [];
}
onNotification() {
console.log("SteveCheck", "Test");
this.router.navigate(["NotificationPage"]);
}
}
alert.component.html:
<StackLayout class="borders" orientation="horizontal" >
<Label class="notification-label" text="Notification Center" ></Label>
<Image src="res://right_arrow" stretch="none" class="right-arrow" (tap)="onNotification()"></Image>
</StackLayout>

Answer 1

constructor(private routerExtensions: RouterExtensions) {
// ...
}
this.routerExtensions.navigate(["/NotificationPage"]);

Answer 2

I have to use Path folder name Notification. I have that second page NotificationComponent placed inside that Notification folder only.That's why I'm unable to navigate between pages.
By changing this :
this.router.navigate(["NotificationPage"]);
to this:
this.router.navigate(["Notification"]);
fixed my issue

Answer 3

Here is an example , we can include routerLink on the img tag-
<img src="../../../assets/images/Notification.png" [routerLink]="['/NotificationPage']" width="55%" height = "200px" class="img-responsive" style="margin-left: 220px">