updates

Author: triniwiz

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

@@ -1,5 +1,3 @@
-import { Async } from 'nativescript-async';
-console.log(new Async().message);
 import { Component } from "@angular/core";
 
 @Component({

demo-angular/src/app/app.module.ts

@@ -1,15 +1,18 @@
-import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptModule } from "nativescript-angular/nativescript.module";
-
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
+import { NativeScriptAsyncModule } from 'nativescript-async/angular';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
 
 @NgModule({
     bootstrap: [
         AppComponent
     ],
     imports: [
         NativeScriptModule,
+        NativeScriptHttpClientModule,
+        NativeScriptAsyncModule,
         AppRoutingModule
     ],
     declarations: [
@@ -19,4 +22,5 @@ import { AppComponent } from "./app.component";
         NO_ERRORS_SCHEMA
     ]
 })
-export class AppModule { }
+export class AppModule {
+}

demo-angular/src/app/home/home.component.html

@@ -1,7 +1,45 @@
 <ActionBar class="action-bar">
-    <Label class="action-bar-title" text="Home"></Label>
+	<Label class="action-bar-title" text="Home"></Label>
 </ActionBar>
 
-<GridLayout class="page">
-    <!-- Add your page content here -->
-</GridLayout>
+<StackLayout class="page">
+	<Button (tap)="getRandomUser()" text="Get Random"></Button>
+	<Label text="Requests Count"></Label>
+	<TextField #userCount text="1"></TextField>
+	<Label text="Users Results Count"></Label>
+	<TextField #userResults text="10"></TextField>
+	<Button (tap)="getRandomUsers(userCount.text, userResults.text)" text="Get RandomUsers"></Button>
+	<Button (tap)="makeRequest()" text="Make Request"></Button>
+	<Button (tap)="makeXhr()" text="Make Xhr Request"></Button>
+	<Button (tap)="base64Xhr()" text="Upload Image Request"></Button>
+	<Button (tap)="showNext()" text="showNext"></Button>
+	<Button (tap)="showPrevious()" text="showPrevious"></Button>
+	<Image [visibility]="dataService?.currentLoadedImage ? 'visible':'collapse'" height="200"
+		   [src]="dataService?.currentLoadedImage"></Image>
+	<ListView [items]="dataService.randomUsers" class="list-group" row="2" height="100%">
+		<ng-template let-item="item">
+			<GridLayout rows="40, auto, auto, auto" [nsRouterLink]="['/item', item.id]">
+				<Image height="40" width="40" borderRadius="20" [src]="item?.picture?.thumbnail"></Image>
+				<Label row="1">
+					<FormattedString>
+						<Span text="Name: "></Span>
+						<Span [text]="item?.name?.title + ' ' + item?.name?.first + ' ' + item?.name?.last | titlecase"></Span>
+					</FormattedString>
+				</Label>
+				<Label row="2">
+					<FormattedString>
+						<Span text="DOB: "></Span>
+						<Span [text]="item?.dob?.date | date:'dd/MM/yyyy' "></Span>
+					</FormattedString>
+				</Label>
+				<Label row="3">
+					<FormattedString>
+						<Span text="Address: "></Span>
+						<Span [text]="item?.location?.street "></Span>
+					</FormattedString>
+				</Label>
+
+			</GridLayout>
+		</ng-template>
+	</ListView>
+</StackLayout>

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

@@ -1,17 +1,47 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '~/app/services/data.service';
 
 @Component({
-    selector: "Home",
+    selector: 'Home',
     moduleId: module.id,
-    templateUrl: "./home.component.html"
+    templateUrl: './home.component.html'
 })
 export class HomeComponent implements OnInit {
 
-    constructor() {
+    constructor(private dataService: DataService) {
         // Use the component constructor to inject providers.
     }
 
     ngOnInit(): void {
         // Init your component properties here.
     }
+
+
+    getRandomUser() {
+        this.dataService.getRandomUser();
+    }
+
+    getRandomUsers(count: any, users: any) {
+        this.dataService.getRandomUsers(count, users);
+    }
+
+    makeRequest() {
+        this.dataService.makeRequest();
+    }
+
+    makeXhr() {
+        this.dataService.makeXhr();
+    }
+
+    base64Xhr() {
+        this.dataService.base64Xhr();
+    }
+
+    showNext() {
+        this.dataService.showNext()
+    }
+
+    showPrevious() {
+        this.dataService.showPrevious();
+    }
 }

demo-angular/src/app/home/home.module.ts

@@ -3,6 +3,7 @@ import { NativeScriptCommonModule } from "nativescript-angular/common";
 
 import { HomeRoutingModule } from "./home-routing.module";
 import { HomeComponent } from "./home.component";
+import { DataService } from '~/app/services/data.service';
 
 @NgModule({
     imports: [
@@ -14,6 +15,9 @@ import { HomeComponent } from "./home.component";
     ],
     schemas: [
         NO_ERRORS_SCHEMA
+    ],
+    providers:[
+        DataService
     ]
 })
 export class HomeModule { }