Finish getting Aurelia functionality matching Angular 2. Also moved CSS from Angular 2 into the site.css.

Author: elanderson

src/ASP.NET-Core-SPAs/Angular/app.component.js

@@ -19,54 +19,6 @@ import 'rxjs/Rx';
         </ul>
         <contact-detail [contact]="selectedContact"></contact-detail>
         `,
-    styles: [`
-      .selected {
-        background-color: #CFD8DC !important;
-        color: white;
-      }
-      .contacts {
-        margin: 0 0 2em 0;
-        list-style-type: none;
-        padding: 0;
-        width: 10em;
-      }
-      .contacts li {
-        cursor: pointer;
-        position: relative;
-        left: 0;
-        background-color: #EEE;
-        margin: .5em;
-        padding: .3em 0em;
-        height: 1.6em;
-        border-radius: 4px;
-      }
-      .contacts li.selected:hover {
-        color: white;
-      }
-      .contacts li:hover {
-        color: #607D8B;
-        background-color: #EEE;
-        left: .1em;
-      }
-      .contacts .text {
-        position: relative;
-        top: -3px;
-      }
-      .contacts .badge {
-        display: inline-block;
-        font-size: small;
-        color: white;
-        padding: 0.8em 0.7em 0em 0.7em;
-        background-color: #607D8B;
-        line-height: 1em;
-        position: relative;
-        left: -1px;
-        top: -4px;
-        height: 1.8em;
-        margin-right: .8em;
-        border-radius: 4px 0px 0px 4px;
-      }
-    `],
     directives: [ContactDetailComponent],
     providers: [
         HTTP_PROVIDERS,

src/ASP.NET-Core-SPAs/Angular/app.component.js.map

@@ -13,11 +13,11 @@ import {Contact} from './contact';
             </div>
             <div>
                 <label>Email: </label>
-                <div><input [(ngModel)]="contact.Email" placeholder="email"></div>
+                <div><input [(ngModel)]="contact.EmailAddress" placeholder="email"></div>
             </div>
             <div>
                 <label>Phone: </label>
-                <div><input [(ngModel)]="contact.Phone" placeholder="phone"></div>
+                <div><input [(ngModel)]="contact.PhoneNumber" placeholder="phone"></div>
             </div>
         </div>
         `,

src/ASP.NET-Core-SPAs/Angular/app.component.ts

@@ -1,10 +1,13 @@
 <template>
+    <require from='./contact-detail'></require>
     <h1>${heading}</h1>
     <div>
-        <ul class="list-unstyled">
-            <li repeat.for="contact of contacts">
+        <ul class="contacts">
+            <li repeat.for="contact of contacts" click.delegate="$parent.select(contact)"
+                class="${contact === $parent.selectedContact ? 'selected' : ''}">
                 <span class="badge">${contact.Id}</span> ${contact.Name}
             </li>
         </ul>
     </div>
+    <contact-detail contact.bind="selectedContact"></contact-detail>
 </template>

src/ASP.NET-Core-SPAs/Angular/contact-detail.component.js

@@ -4,6 +4,7 @@ import {ContactService} from 'contactService';
 export class ContactList {
     static inject = [ContactService];
     heading = 'Contact List';
+    selectedContact = null;
 
     constructor (cs) {
         this.ContactService = cs;
@@ -13,5 +14,9 @@ export class ContactList {
         this.ContactService.GetAll()
             .then(contacts => this.contacts = contacts);
     }
+
+    select(contact) {
+        this.selectedContact = contact;
+    }
 
 }

src/ASP.NET-Core-SPAs/Angular/contact-detail.component.js.map

@@ -0,0 +1,18 @@
+<template bindable="contact">
+    <div if.bind="contact">
+        <h2>${contact.Name}</h2>
+        <div><label>ID: </label>${contact.Id}</div>
+        <div>
+            <label>Name: </label>
+            <div><input value.bind="contact.Name" placeholder="name"></div>
+        </div>
+        <div>
+            <label>Email: </label>
+            <div><input value.bind="contact.EmailAddress" placeholder="email"></div>
+        </div>
+        <div>
+            <label>Phone: </label>
+            <div><input value.bind="contact.PhoneNumber" placeholder="phone"></div>
+        </div>
+    </div>
+</template>