From aac86cfb3e0d2985a86a44d9f50a175e92716d5a Mon Sep 17 00:00:00 2001
From: khushi3 <khushboo.bharti@emids.com>
Date: Mon, 27 Mar 2017 17:46:12 +0530
Subject: [PATCH 1/2] ng-upgrade for contact-list-component

---
 .../contacts-list-component.html              |  8 +-
 .../contacts-list-item-component.html         |  4 +
 .../contacts-list-item-component.ts           | 10 +++
 app/downgrades.ts                             |  5 ++
 app/main.ts                                   |  3 +
 app/models/contact.ts                         | 17 +++++
 app/upgrade-adapter.ts                        |  3 +
 index.html                                    | 76 +++++++++++++++----
 8 files changed, 112 insertions(+), 14 deletions(-)
 create mode 100644 app/contacts-list-item-component/contacts-list-item-component.html
 create mode 100644 app/contacts-list-item-component/contacts-list-item-component.ts
 create mode 100644 app/downgrades.ts
 create mode 100644 app/main.ts
 create mode 100644 app/models/contact.ts
 create mode 100644 app/upgrade-adapter.ts

diff --git a/app/contacts-list-component/contacts-list-component.html b/app/contacts-list-component/contacts-list-component.html
index a95d466..8357576 100644
--- a/app/contacts-list-component/contacts-list-component.html
+++ b/app/contacts-list-component/contacts-list-component.html
@@ -1,4 +1,4 @@
-<ul class="collection">
+<!-- <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">
@@ -6,3 +6,9 @@
     </a>
   </li>
 </ul>
+ -->
+<ul class="collection">
+  <li class="collection-item avatar" ng-repeat="contact in $ctrl.contacts">
+    <contacts-list-item-component [contact]="contact"></contacts-list-item-component>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/app/contacts-list-item-component/contacts-list-item-component.html b/app/contacts-list-item-component/contacts-list-item-component.html
new file mode 100644
index 0000000..7cedd21
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/contacts-list-item-component/contacts-list-item-component.ts b/app/contacts-list-item-component/contacts-list-item-component.ts
new file mode 100644
index 0000000..575fefc
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/app/downgrades.ts b/app/downgrades.ts
new file mode 100644
index 0000000..50749a7
--- /dev/null
+++ b/app/downgrades.ts
@@ -0,0 +1,5 @@
+import {upgradeAdapter} from './upgrade-adapter';
+import {ContactsListItemComponent} from './contacts-list-item-component/contacts-list-item-component';
+declare var angular: any;
+angular.module('contacts-list-item-component', [])
+        .directive('contactsListItemComponent', upgradeAdapter.downgradeNg2Component(ContactsListItemComponent));
\ No newline at end of file
diff --git a/app/main.ts b/app/main.ts
new file mode 100644
index 0000000..1d4e640
--- /dev/null
+++ b/app/main.ts
@@ -0,0 +1,3 @@
+import {upgradeAdapter} from './upgrade-adapter';
+import './downgrades';
+upgradeAdapter.bootstrap(document.body, ['contacts-app']);
diff --git a/app/models/contact.ts b/app/models/contact.ts
new file mode 100644
index 0000000..8f3d905
--- /dev/null
+++ b/app/models/contact.ts
@@ -0,0 +1,17 @@
+interface Address {
+  street: string;
+  city: string;
+  zip: string;
+  country: string;
+}
+
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  birthday: string;
+  website: string;
+  image: string;
+  address: Address;
+}
\ No newline at end of file
diff --git a/app/upgrade-adapter.ts b/app/upgrade-adapter.ts
new file mode 100644
index 0000000..c0af4e9
--- /dev/null
+++ b/app/upgrade-adapter.ts
@@ -0,0 +1,3 @@
+import { UpgradeAdapter } from '@angular/upgrade';
+
+export const upgradeAdapter = new UpgradeAdapter();
\ No newline at end of file
diff --git a/index.html b/index.html
index e48ff1b..a065554 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html ng-app="contacts-app">
+<html>
 
 <head>
-  <title>Angular Migration App by thoughtram</title>
+  <title>Angular Migration App </title>
 
   <base href="/">
 
@@ -16,17 +16,67 @@
   <!-- 1. Load libraries -->
   <!-- IE required polyfills, in this exact order -->
   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-  <script src="node_modules/angular/angular.js"></script>
-  <script src="node_modules/angular-route/angular-route.js"></script>
-
-  <script src="app/contacts-service/contacts-service.es5.js"></script>
-  <script src="app/clone-service/clone-service.es5.js"></script>
-  <script src="app/zippy-component/zippy-component.es5.js"></script>
-  <script src="app/contact-header-component/contact-header-component.es5.js"></script>
-  <script src="app/contacts-list-component/contacts-list-component.es5.js"></script>
-  <script src="app/contact-detail-component/contact-detail-component.es5.js"></script>
-  <script src="app/contact-editor-component/contact-editor-component.es5.js"></script>
-  <script src="app/contacts-app.es5.js"></script>
+<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+<script src="node_modules/zone.js/dist/zone.js"></script>
+<script src="node_modules/reflect-metadata/Reflect.js"></script>
+<script src="node_modules/systemjs/dist/system.src.js"></script>
+
+<script src="node_modules/angular/angular.js"></script>
+<script src="node_modules/angular-route/angular-route.js"></script>
+
+<script src="app/contacts-service/contacts-service.es5.js"></script>
+<script src="app/clone-service/clone-service.es5.js"></script>
+<script src="app/zippy-component/zippy-component.es5.js"></script>
+<script src="app/contact-header-component/contact-header-component.es5.js"></script>
+<script src="app/contacts-list-component/contacts-list-component.es5.js"></script>
+<script src="app/contact-detail-component/contact-detail-component.es5.js"></script>
+<script src="app/contact-editor-component/contact-editor-component.es5.js"></script>
+<script src="app/contacts-app.es5.js"></script>
+<script>
+  System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}});
+  System.config({
+    map: {
+      'rxjs': 'node_modules/rxjs',
+      '@angular': 'node_modules/@angular',
+      'app': 'app'
+    },
+    packages: {
+      'app': {
+        main: 'main.js',
+        defaultExtension: 'js'
+      },
+      '@angular/core': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      '@angular/compiler': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      '@angular/common': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      '@angular/platform-browser': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      '@angular/platform-browser-dynamic': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      '@angular/upgrade': {
+        main: 'index.js',
+        defaultExtension: 'js'
+      },
+      'rxjs': {
+        defaultExtension: 'js'
+      }
+    }
+  });
+
+  System.import('app/main').then(null, console.error.bind(console));
+</script>  
 </head>
 
 <body>

From 205b9c5f06c43017a85a96044f4a45ad459d5835 Mon Sep 17 00:00:00 2001
From: khushi3 <khushboo.bharti@emids.com>
Date: Tue, 28 Mar 2017 15:51:19 +0530
Subject: [PATCH 2/2] contact detail component migration to angular 2

---
 .../contact-detail-component.es5.js           |  18 +-
 .../contact-detail-component.html             |  27 +--
 .../contact-detail-component.ts               |  27 +++
 .../contacts-list-component.es5.js            |   2 +-
 .../contacts-list-component.html              |   9 -
 app/contacts-service/contacts-service.es5.js  | 183 ------------------
 app/contacts-service/contacts-service.ts      | 180 +++++++++++++++++
 app/downgrades.ts                             |  13 +-
 app/main.ts                                   |   4 +
 npm-debug.log.1644013654                      |   0
 10 files changed, 241 insertions(+), 222 deletions(-)
 create mode 100644 app/contact-detail-component/contact-detail-component.ts
 delete mode 100644 app/contacts-service/contacts-service.es5.js
 create mode 100644 app/contacts-service/contacts-service.ts
 create mode 100644 npm-debug.log.1644013654

diff --git a/app/contact-detail-component/contact-detail-component.es5.js b/app/contact-detail-component/contact-detail-component.es5.js
index 2d183ee..482f95a 100644
--- a/app/contact-detail-component/contact-detail-component.es5.js
+++ b/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';
-      };
 
-    }
-});
diff --git a/app/contact-detail-component/contact-detail-component.html b/app/contact-detail-component/contact-detail-component.html
index 4f1f08b..e18abf9 100644
--- a/app/contact-detail-component/contact-detail-component.html
+++ b/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>
\ No newline at end of file
diff --git a/app/contact-detail-component/contact-detail-component.ts b/app/contact-detail-component/contact-detail-component.ts
new file mode 100644
index 0000000..b9420a2
--- /dev/null
+++ b/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';
+  }
+}
\ No newline at end of file
diff --git a/app/contacts-list-component/contacts-list-component.es5.js b/app/contacts-list-component/contacts-list-component.es5.js
index 624388f..ea61978 100644
--- a/app/contacts-list-component/contacts-list-component.es5.js
+++ b/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>'
diff --git a/app/contacts-list-component/contacts-list-component.html b/app/contacts-list-component/contacts-list-component.html
index 8357576..66a9bdd 100644
--- a/app/contacts-list-component/contacts-list-component.html
+++ b/app/contacts-list-component/contacts-list-component.html
@@ -1,12 +1,3 @@
-<!-- <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>
-  </li>
-</ul>
- -->
 <ul class="collection">
   <li class="collection-item avatar" ng-repeat="contact in $ctrl.contacts">
     <contacts-list-item-component [contact]="contact"></contacts-list-item-component>
diff --git a/app/contacts-service/contacts-service.es5.js b/app/contacts-service/contacts-service.es5.js
deleted file mode 100644
index 16bb51b..0000000
--- a/app/contacts-service/contacts-service.es5.js
+++ /dev/null
@@ -1,183 +0,0 @@
-angular
-  .module('contacts-service', [])
-  .service('contactsService', function ContactsService () {
-
-    var CONTACT_DATA = [
-        {
-            id: 0,
-            name: 'Christoph Burgdorf',
-            email: 'christoph@thoughtram.io',
-            phone: '+49 000 1111',
-            birthday: '1984-01-02',
-            website: 'thoughtram.io',
-            image: '/assets/images/0.jpg',
-            address: {
-              street: 'thoughtram road 1',
-              zip: '65222',
-              city: 'Hanover',
-              country: 'Germany'
-            }
-        },
-        {
-            id: 1,
-            name: 'Pascal Precht',
-            email: 'pascal@thoughtram.io',
-            phone: '+49 000 222',
-            birthday: '1991-03-31',
-            website: 'thoughtram.io',
-            image: '/assets/images/1.jpg',
-            address: {
-              street: 'thoughtram road 1',
-              zip: '65222',
-              city: 'Hanover',
-              country: 'Germany'
-            }
-        },
-        {
-            id: 2,
-            name: 'Nicole Hansen',
-            email: 'who@car.es',
-            phone: '+49 000 333',
-            birthday: '1981-03-31',
-            website: '',
-            image: '/assets/images/3.jpg',
-            address: {
-              street: 'Who Cares Street 42',
-              zip: '65222',
-              city: 'Sun Funcisco',
-              country: 'United States'
-            }
-        },
-        {
-            id: 3,
-            name: 'Zoe Moore',
-            email: 'zoe@moore.com',
-            phone: '+49 000 000',
-            birthday: '1990-02-18',
-            website: '',
-            image: '/assets/images/4.jpg',
-            address: {
-              street: '3745 denny street',
-              zip: '86337',
-              city: 'Ballinasloe',
-              country: 'United States'
-            }
-        },
-        {
-            id: 4,
-            name: 'Diane Hale',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/5.jpg',
-            address: {
-              street: '1459 tara street',
-              zip: '18371',
-              city: 'Bray',
-              country: 'United States'
-            }
-        },
-        {
-            id: 5,
-            name: 'Diana Ellis',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/6.jpg',
-            address: {
-              street: '6503 tara street',
-              zip: '43378',
-              city: 'Dungarvan',
-              country: 'United States'
-            }
-        },
-        {
-            id: 6,
-            name: 'Barry Ford',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/7.jpg',
-            address: {
-              street: '6554 park lane',
-              zip: '43378',
-              city: 'Rush',
-              country: 'United States'
-            }
-        },
-        {
-            id: 7,
-            name: 'Ella Grant',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/8.jpg',
-            address: {
-              street: '2749 church road',
-              zip: '87125',
-              city: 'Clonakilty',
-              country: 'United States'
-            }
-        },
-        {
-            id: 8,
-            name: 'Brent Mason',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/9.jpg',
-            address: {
-              street: '8436 tara street',
-              zip: '59949',
-              city: 'Dundalk',
-              country: 'United States'
-            }
-        },
-        {
-            id: 9,
-            name: 'Sam Thomas',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/10.jpg',
-            address: {
-              street: '2523 park road',
-              zip: '59949',
-              city: 'Drogheda',
-              country: 'United States'
-            }
-        },
-        {
-            id: 10,
-            name: 'Vicky Roberts',
-            email: '',
-            phone: '',
-            birthday: '',
-            website: '',
-            image: '/assets/images/11.jpg',
-            address: {
-              street: '9791 grafton street',
-              zip: '30165',
-              city: 'Galway',
-              country: 'London'
-            }
-        }
-    ];
-
-    this.getContacts = function () {
-      return CONTACT_DATA;
-    };
-
-    this.getContact = function (id) {
-      return this.getContacts()
-                 .find(function (contact) {
-                   return contact.id == id;
-                 })
-    }
-  });
diff --git a/app/contacts-service/contacts-service.ts b/app/contacts-service/contacts-service.ts
new file mode 100644
index 0000000..ec999e0
--- /dev/null
+++ b/app/contacts-service/contacts-service.ts
@@ -0,0 +1,180 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class ContactsService {
+  private CONTACT_DATA = [
+      {
+          id: 0,
+          name: 'Christoph Burgdorf',
+          email: 'christoph@thoughtram.io',
+          phone: '+49 000 1111',
+          birthday: '1984-01-02',
+          website: 'thoughtram.io',
+          image: '/assets/images/0.jpg',
+          address: {
+            street: 'thoughtram road 1',
+            zip: '65222',
+            city: 'Hanover',
+            country: 'Germany'
+          }
+      },
+      {
+          id: 1,
+          name: 'Pascal Precht',
+          email: 'pascal@thoughtram.io',
+          phone: '+49 000 222',
+          birthday: '1991-03-31',
+          website: 'thoughtram.io',
+          image: '/assets/images/1.jpg',
+          address: {
+            street: 'thoughtram road 1',
+            zip: '65222',
+            city: 'Hanover',
+            country: 'Germany'
+          }
+      },
+      {
+          id: 2,
+          name: 'Nicole Hansen',
+          email: 'who@car.es',
+          phone: '+49 000 333',
+          birthday: '1981-03-31',
+          website: '',
+          image: '/assets/images/3.jpg',
+          address: {
+            street: 'Who Cares Street 42',
+            zip: '65222',
+            city: 'Sun Funcisco',
+            country: 'United States'
+          }
+      },
+      {
+          id: 3,
+          name: 'Zoe Moore',
+          email: 'zoe@moore.com',
+          phone: '+49 000 000',
+          birthday: '1990-02-18',
+          website: '',
+          image: '/assets/images/4.jpg',
+          address: {
+            street: '3745 denny street',
+            zip: '86337',
+            city: 'Ballinasloe',
+            country: 'United States'
+          }
+      },
+      {
+          id: 4,
+          name: 'Diane Hale',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/5.jpg',
+          address: {
+            street: '1459 tara street',
+            zip: '18371',
+            city: 'Bray',
+            country: 'United States'
+          }
+      },
+      {
+          id: 5,
+          name: 'Diana Ellis',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/6.jpg',
+          address: {
+            street: '6503 tara street',
+            zip: '43378',
+            city: 'Dungarvan',
+            country: 'United States'
+          }
+      },
+      {
+          id: 6,
+          name: 'Barry Ford',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/7.jpg',
+          address: {
+            street: '6554 park lane',
+            zip: '43378',
+            city: 'Rush',
+            country: 'United States'
+          }
+      },
+      {
+          id: 7,
+          name: 'Ella Grant',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/8.jpg',
+          address: {
+            street: '2749 church road',
+            zip: '87125',
+            city: 'Clonakilty',
+            country: 'United States'
+          }
+      },
+      {
+          id: 8,
+          name: 'Brent Mason',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/9.jpg',
+          address: {
+            street: '8436 tara street',
+            zip: '59949',
+            city: 'Dundalk',
+            country: 'United States'
+          }
+      },
+      {
+          id: 9,
+          name: 'Sam Thomas',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/10.jpg',
+          address: {
+            street: '2523 park road',
+            zip: '59949',
+            city: 'Drogheda',
+            country: 'United States'
+          }
+      },
+      {
+          id: 10,
+          name: 'Vicky Roberts',
+          email: '',
+          phone: '',
+          birthday: '',
+          website: '',
+          image: '/assets/images/11.jpg',
+          address: {
+            street: '9791 grafton street',
+            zip: '30165',
+            city: 'Galway',
+            country: 'London'
+          }
+      }
+  ];
+
+  getContacts () {
+    return this.CONTACT_DATA;
+  }
+
+  getContact (id: string) {
+    return this.CONTACT_DATA.find(contact => contact.id.toString() === id);
+  }
+}
diff --git a/app/downgrades.ts b/app/downgrades.ts
index 50749a7..5644431 100644
--- a/app/downgrades.ts
+++ b/app/downgrades.ts
@@ -1,5 +1,14 @@
 import {upgradeAdapter} from './upgrade-adapter';
 import {ContactsListItemComponent} from './contacts-list-item-component/contacts-list-item-component';
-declare var angular: any;
+import {ContactDetailComponent} from './contact-detail-component/contact-detail-component';
+import {ContactsService} from './contacts-service/contacts-service'
+
+declare let angular: any;
+upgradeAdapter.addProvider(ContactsListItemComponent);
+
 angular.module('contacts-list-item-component', [])
-        .directive('contactsListItemComponent', upgradeAdapter.downgradeNg2Component(ContactsListItemComponent));
\ No newline at end of file
+        .directive('contactsListItemComponent', upgradeAdapter.downgradeNg2Component(ContactsListItemComponent));
+angular.module('contact-detail-component')
+       .directive('contactDetailComponent', upgradeAdapter.downgradeNg2Component(ContactDetailComponent));
+angular.module('contacts-service', [])
+       .service('contactsService', upgradeAdapter.downgradeNg2Provider(ContactsService));
\ No newline at end of file
diff --git a/app/main.ts b/app/main.ts
index 1d4e640..f1f9bfb 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -1,3 +1,7 @@
 import {upgradeAdapter} from './upgrade-adapter';
 import './downgrades';
+import {ContactsService} from './contacts-service/contacts-service'
+
 upgradeAdapter.bootstrap(document.body, ['contacts-app']);
+upgradeAdapter.addProvider(ContactsService);
+
diff --git a/npm-debug.log.1644013654 b/npm-debug.log.1644013654
new file mode 100644
index 0000000..e69de29