use dynamic link for blockHash in block detail page; retrieve block data

app/src/pages/block-detail/block-detail.html

@@ -14,13 +14,13 @@
 
 
 <ion-content padding>
-  <p>Block #</p>
-  <p>BlockHash {{ blockHash }}</p>
+  <p>Block # {{ block.height }}</p>
+  <p>BlockHash {{ block.hash }}</p>
   <p>Summary</p>
-  <p>Number of Transactions</p>
+  <p>Number of Transactions {{ block.tx.length }}</p>
   <p>Height</p>
-  <p>Block Reward</p>
-  <p>Timestamp</p>
+  <p>Block Reward {{ block.reward }}</p>
+  <p>Timestamp </p>
   <p>Mined by</p>
   <p>Merkle Root</p>
   <p>Previous Block</p>

app/src/pages/block-detail/block-detail.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { Http } from '@angular/http';
 
 /**
  * Generated class for the BlockDetailPage page.
@@ -8,22 +9,39 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
  * on Ionic pages and navigation.
  */
 @IonicPage({
-  name: 'block-detail'
+  name: 'block-detail',
+  segment: 'block/:blockHash'
 })
 @Component({
   selector: 'page-block-detail',
-  templateUrl: 'block-detail.html',
+  templateUrl: 'block-detail.html'
 })
 export class BlockDetailPage {
 
-  blockHash: string;
+  private blockHash: string;
+  public block: any = {
+    tx: []
+  };
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams) {
     this.blockHash = navParams.get('blockHash');
     console.log('blockHash is', this.blockHash);
+
+    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+
+    this.http.get(apiPrefix + 'block/' + this.blockHash).subscribe(
+      (data) => {
+        console.log('block is', data);
+        this.block = JSON.parse(data['_body']);
+        console.log('this.block is', this.block);
+      },
+      (err) => {
+        console.log('err is', err);
+      }
+    );
   }
 
-  ionViewDidLoad() {
+  public ionViewDidLoad(): void {
     console.log('ionViewDidLoad BlockDetailPage');
   }
 

app/src/pages/blocksPage/blocksPage.ts

@@ -27,7 +27,7 @@ export class BlocksPage {
 
   public search(event) {
     console.log('q is', this.q);
-    let apiPrefix = 'http://localhost:3001/insight-api/';
+    let apiPrefix: string = 'http://localhost:3001/insight-api/';
     this.http.get(apiPrefix + 'block/' + this.q).subscribe(
       (data) => {
         this.resetSearch();
@@ -53,7 +53,7 @@ export class BlocksPage {
                     let parsedData = JSON.parse(data._body);
                     console.log('parsedData', parsedData);
                     this.navCtrl.push('block-detail', {
-                      blockHash: parsedData.blockHash
+                      'blockHash': parsedData.blockHash
                     });
                   }.bind(this),
                   function (err) {