Angular Restangular

package.json

@@ -27,6 +27,7 @@
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
+    "ngx-restangular": "^1.0.13",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
   },

src/app/app.module.ts

@@ -26,6 +26,9 @@ import { ContactComponent } from './contact/contact.component';
 import { LoginComponent } from './login/login.component';
 
 import { baseURL } from './shared/baseurl';
+import { RestangularConfigFactory } from './shared/restConfig';
+
+import { RestangularModule, Restangular } from 'ngx-restangular';
 
 @NgModule({
   declarations: [
@@ -47,7 +50,8 @@ import { baseURL } from './shared/baseurl';
     MaterialModule,
     FlexLayoutModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    RestangularModule.forRoot(RestangularConfigFactory)
   ],
   providers: [
     DishService,

src/app/dishdetail/dishdetail.component.ts

@@ -15,6 +15,7 @@ import 'rxjs/add/operator/switchMap';
 })
 export class DishdetailComponent implements OnInit {
   dish: Dish;
+  dishcopy = null;
   dishIds: number[];
   prev: number;
   next: number;
@@ -33,6 +34,7 @@ export class DishdetailComponent implements OnInit {
       .switchMap((params: Params) => this.dishservice.getDish(+params['id']))
       .subscribe(result =>  {
           this.dish = result;
+          this.dishcopy = result;
           this.setPrevNext(result.id);
         },
         errMess => this.errMess = <any>errMess);

src/app/services/dish.service.ts

@@ -13,28 +13,28 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 
+import { RestangularModule, Restangular } from 'ngx-restangular';
+
 @Injectable()
 export class DishService {
 
-  constructor(private http: Http,
-    private processHttpmsgService: ProcessHttpmsgService) { }
+  constructor(
+    private restangular: Restangular,
+    private http: Http,
+    private processHttpmsgService: ProcessHttpmsgService
+  ) { }
 
   getDishes(): Observable<Dish[]> {
-    return this.http.get(baseURL + 'dishes')
-      .map(res => this.processHttpmsgService.extractData(res) )
-      .catch(error => this.processHttpmsgService.handleError(error));
+    return this.restangular.all('dishes').getList();
   }
 
   getDish(id: number): Observable<Dish> {
-    return this.http.get(baseURL + 'dishes/' + 'id')
-      .map(res => this.processHttpmsgService.extractData(res) )
-      .catch(error => this.processHttpmsgService.handleError(error));
+    return this.restangular.one('dishes', id);
   }
 
   getFeaturedDish(): Observable<Dish> {
-    return this.http.get(baseURL + 'dishes?featured=true')
-      .map(res => this.processHttpmsgService.extractData(res) )[0]
-      .catch(error => this.processHttpmsgService.handleError(error));
+    return this.restangular.all('dishes').getList( {featured: true} )
+      .map(dishes => dishes[0]);
   }
 
   getDishIds(): Observable<number[]> {

src/app/shared/restConfig.ts

@@ -0,0 +1,5 @@
+import { baseURL } from './baseurl';
+
+export function RestangularConfigFactory (RestangularProvider) {
+    RestangularProvider.setBaseUrl(baseURL);
+}