Add click event to inspect NativeScript issues with lazy loading

Author: jdnichollsc

src/app/about/components/about/about.component.tns.html

@@ -5,7 +5,7 @@
             <Button class="ion-icon" text="{{ '\uF30C' }}" [nsRouterLink]="['/home']" clearHistory="true"></Button>
         </ActionItem>
     </ActionBarExtension>
-    <GridLayout rows="auto, *">
+    <StackLayout>
         <Label class="h1 title" text="About me!"></Label>
-    </GridLayout>
+    </StackLayout>
 </Page>

src/app/app.component.tns.html

@@ -1,7 +1,5 @@
-<GridLayout rows="auto, *">
-    <ActionBar title="NativeScript Mobile App, yay!">
-    </ActionBar>
-    <StackLayout class="container" row="1">
-        <page-router-outlet></page-router-outlet>
-    </StackLayout>
-</GridLayout>
+<ActionBar title="NativeScript Mobile App, yay!">
+</ActionBar>
+<StackLayout class="container" row="1">
+    <router-outlet></router-outlet>
+</StackLayout>

src/app/home/components/home/home.component.tns.html

@@ -1,7 +1,7 @@
 <Page xmlns:Card="nativescript-cardview">
     <ActionBarExtension>
         <ActionItem ios.position="right">
-            <Button class="ion-icon" [nsRouterLink]="['/about']" text="{{ '\uf41a' }}" pageTransition="flip"></Button>
+            <Button class="ion-icon" [nsRouterLink]="['/about']" text="{{ '\uf41a' }}"></Button>
         </ActionItem>
     </ActionBarExtension>
     <scroll-view>
@@ -10,7 +10,7 @@
             <StackLayout row="1">
                 <Card:CardView class="cardStyle" radius="10" elevation="50" margin="20">
                     <grid-layout rows="*, *, *" columns="*, *, *">
-                        <Image src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
+                        <Image (click)="openPage()" src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
                         <TextView class="description" editable="false" text="The most popular template to create web (Ionic) and native (NativeScript) mobile apps!" textWrap="true" row="1" colSpan="3"></TextView>          
                         <Button text="Favorite" tap="goAway" row="3" col="0"></Button>
                         <Button text="Listen" row="3" col="1"></Button>

src/app/home/components/home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
     moduleId: module.id,
@@ -8,10 +9,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-    constructor() { }
+    constructor(private _router: Router) {}
 
     ngOnInit() {
+        
+    }
 
+    openPage(url) {
+        let options = {
+            title: "Race selection",
+            message: "Race chosen: Unicorn",
+            okButtonText: "OK"
+        };
+        alert(options);
     }
 
 }