Create contact detail in Angular. (#5)

* Add files and part of the implementation for contact detail in the Angular project.

* Complete contact detail changes for Angular project.

Author: elanderson

ASP.NET Core Basics/src/Angular/ClientApp/app/app.module.ts

@@ -6,6 +6,7 @@ import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { ContactListComponent } from './components/contacts/contactlist.component';
+import { ContactDetailComponent } from './components/contacts/contactdetail.component';
 import { CounterComponent } from './components/counter/counter.component';
 
 @NgModule({
@@ -16,6 +17,7 @@ import { CounterComponent } from './components/counter/counter.component';
         CounterComponent,
         FetchDataComponent,
         ContactListComponent,
+        ContactDetailComponent,
         HomeComponent
     ],
     imports: [
@@ -26,6 +28,7 @@ import { CounterComponent } from './components/counter/counter.component';
             { path: 'counter', component: CounterComponent },
             { path: 'fetch-data', component: FetchDataComponent },
             { path: 'contact-list', component: ContactListComponent },
+            { path: 'contact-detail/:id', component: ContactDetailComponent },
             { path: '**', redirectTo: 'home' }
         ])
     ]

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contact.service.ts

@@ -5,15 +5,24 @@ import { Contact } from './contact';
 
 @Injectable()
 export class ContactService {
+    baseUrl = 'http://localhost:13322/api/contactsApi/';
 
     constructor(private http: Http) {
     } 
 
     getAll(): Promise<Contact[]> {
-        return this.http.get('http://localhost:13322/api/contactsApi/')
+        return this.http.get(this.baseUrl)
             .toPromise()
             .then(response => response.json())
             .then(contacts => Array.from(contacts, c => new Contact(c)))
             .catch(error => console.log(error));
     }
+
+    getById(id: string): Promise<Contact> {
+        return this.http.get(this.baseUrl + id)
+            .toPromise()
+            .then(response => response.json())
+            .then(contact => new Contact(contact))
+            .catch(error => console.log(error));
+    }
 }

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactdetail.component.html

@@ -0,0 +1,18 @@
+<h1>Contact Details</h1>
+<hr />
+<div *ngIf="contact">
+    <dl class="dl-horizontal">
+        <dt>ID</dt>
+        <dd>{{contact.id}}</dd>
+        <dt>Name</dt>
+        <dd>{{contact.name}}</dd>
+        <dt>Address</dt>
+        <dd>{{contact.getAddress()}}</dd>
+        <dt>Phone</dt>
+        <dd>{{contact.phone}}</dd>
+        <dt>Email</dt>
+        <dd>{{contact.email}}</dd>
+    </dl>
+</div>
+<a routerLink="/contact-list">Back to List</a>
+<hr />

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactdetail.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import 'rxjs/add/operator/switchMap';
+import { Contact } from './contact';
+import { ContactService } from './contact.service';
+
+@Component({
+    selector: 'contactdetail',
+    template: require('./contactdetail.component.html'),
+    providers: [ContactService]
+})
+export class ContactDetailComponent implements OnInit {
+    contact: Contact;
+
+    constructor(private route: ActivatedRoute,
+                private router: Router,
+                private contactService: ContactService) { }
+
+    ngOnInit(): void {
+        this.route.params
+            .switchMap((params: Params) => this.contactService.getById(params['id']))
+            .subscribe((contact :Contact) => this.contact = contact);
+    }
+}

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactlist.component.html

@@ -7,18 +7,14 @@
         <tr>
             <th>ID</th>
             <th>Name</th>
-            <th>Address</th>
-            <th>Phone</th>
-            <th>Email</th>
+            <th></th>
         </tr>
     </thead>
     <tbody>
         <tr *ngFor="let contact of contacts">
             <td>{{contact.id}}</td>
             <td>{{contact.name}}</td>
-            <td>{{contact.getAddress()}}</td>
-            <td>{{contact.phone}}</td>
-            <td>{{contact.email}}</td>
+            <td><a [routerLink]="['/contact-detail', contact.id]" (click)="onSelect(contact)">Details</a></td>
         </tr>
     </tbody>
 </table>

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactlist.component.ts

@@ -9,11 +9,16 @@ import { ContactService } from './contact.service';
 })
 export class ContactListComponent implements OnInit {
     contacts: Contact[];
+    selectedContactId: number = null;
 
     constructor(private contactService: ContactService) { }
 
     ngOnInit(): void {
         this.contactService.getAll()
             .then(contacts => this.contacts = contacts);
     }
+
+    onSelect(contact) {
+        this.selectedContactId = contact.id;
+    }
 }