probe detail router

src/app/packages/probe/component/detail/detail.component.html

@@ -1,3 +1,3 @@
 <p>
-  detail works!
+  {{probeId}} detail 
 </p>

src/app/packages/probe/component/detail/detail.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'of-detail',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DetailComponent implements OnInit {
 
-  constructor() { }
+  probeId = undefined;
+
+  constructor(private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
+    this.probeId = this.route.snapshot.paramMap.get('id');
   }
 
 }

src/app/packages/probe/component/list/list.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { MatTableDataSource, MatSort } from '@angular/material';
 import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Router } from '@angular/router';
 
 export interface Probe {
   id: string;
@@ -50,12 +51,12 @@ export class ListComponent implements OnInit, AfterContentInit  {
     this.dataSource.sort = this.sort;
   }
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
 
   handleRowClick(obj: Probe) {
-    alert(obj.id);
+    this.router.navigate(['probe', obj.id]);
   }
 }

src/app/pages/probe/probe-page.component.ts

@@ -1,18 +1,24 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'of-pages-probe',
   templateUrl: './probe-page.component.html',
   styleUrls: ['./probe-page.component.scss']
 })
-export class ProbePageComponent  {
+export class ProbePageComponent implements OnInit {
 
-  tabs = [
-    { label: 'Info', path: '/probe' },
+  tabs = undefined;
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit() {
+    this.tabs = [
+      { label: 'Info', path: this.router.url },
       { label: 'Targets', path: '/target' },
       { label: 'History', path: '/probe/history' },
     ];
-
-  constructor() { }
+  }
 
 }