##ng-upgrade for contact-list-component

app/contact-detail-component/contact-detail-component.es5.js

@@ -2,21 +2,11 @@ angular
   .module('contact-detail-component', ['ngRoute', 'contacts-service', 'zippy-component'])
   .config(function ($routeProvider) {
     $routeProvider.when('/contact/:id', {
+       controller: function (contactsService, $routeParams) {
+        this.contact = contactsService.getContact($routeParams.id);
+      },
+      controllerAs: '$ctrl',
       template: '<contact-detail-component><contact-detail-component>'
     });
   })
-  .component('contactDetailComponent', {
-    templateUrl: 'app/contact-detail-component/contact-detail-component.html',
-    controller: function (contactsService, $routeParams) {
-
-      this.$onInit = function () {
-        this.contact = contactsService.getContact($routeParams.id);
-        this.toggleCaption(false);
-      };
-
-      this.toggleCaption = function (closed) {
-        this.zippyCaption = closed ? 'Show address' : 'Hide address';
-      };
 
-    }
-});

app/contact-detail-component/contact-detail-component.html

@@ -2,52 +2,53 @@
   <div class="col s12 m7">
     <div class="card">
       <div class="card-image">
-        <img ng-src="{{$ctrl.contact.image}}">
-        <span class="card-title">{{$ctrl.contact.name}}</span>
+        <img src="{{contact?.image}}">
+        <span class="card-title">{{contact?.name}}</span>
       </div>
       <div class="card-content grey-text text-darken-4">
         <div class="row">
           <span class="col s6"><i class="material-icons prefix">email</i> Email:</span>
-          <span class="col s6">{{$ctrl.contact.email || '-'}}</span>
+          <span class="col s6">{{contact?.email || '-'}}</span>
         </div>
         <div class="row">
           <span class="col s6"><i class="material-icons prefix">phone</i> Phone:</span>
-          <span class="col s6">{{$ctrl.contact.phone || '-'}}</span>
+          <span class="col s6">{{contact?.phone || '-'}}</span>
         </div>
         <div class="row">
           <span class="col s6"><i class="material-icons prefix">cake</i> Birthday:</span>
-          <span class="col s6">{{$ctrl.contact.birthday || '-'}}</span>
+          <span class="col s6">{{contact?.birthday || '-'}}</span>
         </div>
         <div class="row">
           <span class="col s6"><i class="material-icons prefix">public</i> Website:</span>
-          <span class="col s6">{{$ctrl.contact.website || '-'}}</span>
+          <span class="col s6">{{contact?.website || '-'}}</span>
         </div>
-        <zippy-component title="{{$ctrl.zippyCaption}}" toggle="$ctrl.toggleCaption(closed)">
+        <zippy-component title="{{zippyCaption}}" (toggle)="toggleCaption($event.closed)">
+
           <fieldset>
             <legend><i class="material-icons prefix">location_city</i> Address</legend>
             <div class="row">
               <span class="col s6">Street:</span>
-              <span class="col s6">{{$ctrl.contact.address.street || '-'}}</span>
+              <span class="col s6">{{contact?.address?.street || '-'}}</span>
             </div>
             <div class="row">
               <span class="col s6">Zipcode:</span>
-              <span class="col s6">{{$ctrl.contact.address.zip || '-'}}</span>
+              <span class="col s6">{{contact?.address?.zip || '-'}}</span>
             </div>
             <div class="row">
               <span class="col s6">City:</span>
-              <span class="col s6">{{$ctrl.contact.address.city || '-'}}</span>
+              <span class="col s6">{{contact?.address?.city || '-'}}</span>
             </div>
             <div class="row">
               <span class="col s6">Country:</span>
-              <span class="col s6">{{$ctrl.contact.address.country || '-'}}</span>
+              <span class="col s6">{{contact?.address?.country || '-'}}</span>
             </div>
           </fieldset>
         </zippy-component>
       </div>
       <div class="card-action">
         <a class="btn" href="#/">Go Back</a>
-        <a class="btn" ng-href="#/contact/{{$ctrl.contact.id}}/edit">Edit</a>
+        <a class="btn" href="#/contact/{{contact?.id}}/edit">Edit</a>
       </div>
     </div>
   </div>
-</div>
+</div>

app/contact-detail-component/contact-detail-component.ts

@@ -0,0 +1,27 @@
+import {Component, Input,Inject} from '@angular/core';
+import {Contact} from '../models/contact';
+import {ContactsService} from '../contacts-service/contacts-service'
+import {upgradeAdapter} from '../upgrade-adapter';
+// upgradeAdapter.upgradeNg1Provider('contactsService');
+
+ upgradeAdapter.upgradeNg1Provider('$routeParams');
+const ZippyComponent = upgradeAdapter.upgradeNg1Component('zippyComponent');
+@Component({
+  selector: 'contact-detail-component',
+  templateUrl: 'app/contact-detail-component/contact-detail-component.html',
+  directives: [ZippyComponent],
+  providers: [ContactsService] 
+})
+export class ContactDetailComponent {
+  @Input() contact: Contact;
+    zippyCaption: string;
+
+ constructor (@Inject('$routeParams') $routeParams: any,
+             contactsService: ContactsService) {
+  this.contact = contactsService.getContact($routeParams.id);
+  this.toggleCaption(false);
+}
+  toggleCaption (closed: boolean) {
+    this.zippyCaption = closed ? 'Show address' : 'Hide address';
+  }
+}

app/contacts-list-component/contacts-list-component.es5.js

@@ -1,5 +1,5 @@
 angular
-  .module('contacts-list-component', ['ngRoute', 'contacts-service'])
+  .module('contacts-list-component', ['ngRoute', 'contacts-service','contacts-list-item-component'])
   .config(function ($routeProvider) {
     $routeProvider.when('/', {
       template: '<contacts-list-component></contacts-list-component>'

app/contacts-list-component/contacts-list-component.html

@@ -1,8 +1,5 @@
 <ul class="collection">
   <li class="collection-item avatar" ng-repeat="contact in $ctrl.contacts">
-    <a ng-href="#/contact/{{contact.id}}">
-      <img ng-src="{{contact.image}}" alt="" class="circle">
-      <span class="title">{{contact.name}}</span>
-    </a>
+    <contacts-list-item-component [contact]="contact"></contacts-list-item-component>
   </li>
-</ul>
+</ul>

app/contacts-list-item-component/contacts-list-item-component.html

@@ -0,0 +1,4 @@
+<a href="#/contact/{{contact.id}}">
+  <img [src]="contact.image" alt="" class="circle">
+  <span class="title">{{contact.name}}</span>
+</a>

app/contacts-list-item-component/contacts-list-item-component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+import {Contact} from '../models/contact';
+
+@Component({
+  selector: 'contacts-list-item-component',
+  templateUrl: 'app/contacts-list-item-component/contacts-list-item-component.html'
+})
+export class ContactsListItemComponent {
+  @Input() contact: Contact;
+}