part-5-6

src/app/app-routing.module.ts

@@ -6,13 +6,15 @@ import {ModuleSettingComponent} from './module/module-setting/module-setting.com
 import {ModuleReportComponent} from './module/module-report/module-report.component';
 import {UserListComponent} from './module/module-user/user-list/user-list.component';
 import {UserAddComponent} from './module/module-user/user-add/user-add.component';
+import {UserDetailComponent} from './module/module-user/user-detail/user-detail.component';
 
 const router:Routes = [
   {path:"",redirectTo:"dashboard",pathMatch:"full"},
   {path:"dashboard",component:ModuleDashboardComponent},
   {path:"user",component:ModuleUserComponent, children:[
     {path:"",component:UserListComponent},
-    {path:"add",component:UserAddComponent}
+    {path:"add",component:UserAddComponent},
+    {path:"detail/:id",component:UserDetailComponent}
   ]},
   {path:"setting",component:ModuleSettingComponent},
   {path:"report",component:ModuleReportComponent}

src/app/dtcservice/user.service.ts

@@ -26,4 +26,9 @@ export class UserService {
     return this.http.put(`${this.apihost}/user/${id}`, user, httpOptions);
   }
 
+  getUser(id: number): Observable<User> {
+    const url = `${this.apihost}/user/${id}`;
+    return this.http.get<User>(url);
+  }
+
 }

src/app/module/module-user/user-detail/user-detail.component.html

@@ -1 +1 @@
-<p>user-detail works!</p>
+<app-user-form [user] = user></app-user-form>

src/app/module/module-user/user-detail/user-detail.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { User } from '../../../dtcservice/user';
+import {UserService} from '../../../dtcservice/user.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-user-detail',
@@ -6,10 +9,18 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./user-detail.component.scss']
 })
 export class UserDetailComponent implements OnInit {
-
-  constructor() { }
+  user:User;
+  constructor( private route:ActivatedRoute,private userService:UserService) { }
 
   ngOnInit() {
+    this.getUser();
+  }
+
+  getUser(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.userService.getUser(id)
+    .subscribe(user => this.user = user);
   }
 
+
 }

src/app/module/module-user/user-form/user-form.component.html

@@ -2,7 +2,7 @@
     <fieldset>
         <div *ngIf="user.id" class="pure-control-group">
             <label for="username">User Id</label>
-            <input readonly id="username" [(ngModel)]="user.username" value="{{user.id}}">
+            <input readonly id="username" [(ngModel)]="user.id">
         </div>
         <div class="pure-control-group">
             <label for="username">Username</label>

src/app/module/module-user/user-list/user-list.component.html

@@ -3,5 +3,6 @@
     <li class="userlist" *ngFor="let user of users">
         <h5>{{user.username}}</h5>
        Fullname : {{user.fullname}}
+       <br /><button routerLink="/user/detail/{{user.id}}" class="pure-button pure-button-primary">Detail</button>
     </li>
 </ul>