edit product and pub sub service

- enabled edit product
- added pub sub service for communicating between product add/edit
component and product list component
- refactored animations

Author: cornflourblue

README.md

@@ -1,3 +1,3 @@
 # angular2-animation-tutorial-example
 
-Angular 2 / 4 - Router Animation Example & Tutorial
+Angular 2/4 - Router Animation Example & Tutorial

app/_animations/fade-in.animation.ts

@@ -0,0 +1,14 @@
+import { trigger, state, animate, transition, style } from '@angular/animations';
+
+export const fadeInAnimation =
+    trigger('fadeInAnimation', [
+        // route 'enter' transition
+        transition(':enter', [
+
+            // styles at start of transition
+            style({ opacity: 0 }),
+
+            // animation and styles at end of transition
+            animate('.3s', style({ opacity: 1 }))
+        ]),
+    ]);

app/_animations/index.ts

@@ -0,0 +1,2 @@
+export * from './fade-in.animation';
+export * from './slide-in-out.animation';

app/_helpers/animations.ts renamed to app/_animations/slide-in-out.animation.ts

@@ -1,21 +1,7 @@
 import { trigger, state, animate, transition, style } from '@angular/animations';
 
-export function fadeIn() {
-    return trigger('fadeIn', [
-        // route 'enter' transition
-        transition(':enter', [
-
-            // styles at start of transition
-            style({ opacity: 0 }),
-
-            // animation and styles at end of transition
-            animate('.3s', style({ opacity: 1 }))
-        ]),
-    ]);
-}
-
-export function slideInOut() {
-    return trigger('slideInOut', [
+export const slideInOutAnimation =
+    trigger('slideInOutAnimation', [
 
         // end state styles for route container (host)
         state('*', style({
@@ -62,5 +48,4 @@ export function slideInOut() {
                 backgroundColor: 'rgba(0, 0, 0, 0)'
             }))
         ])
-    ])
-}
+    ]);

app/_services/index.ts

@@ -1 +1,2 @@
 export * from './product.service';
+export * from './pub-sub.service';

app/_services/product.service.ts

@@ -7,7 +7,7 @@ export class ProductService {
     }
 
     getById(id: number) {
-        return this.getProducts().filter(product => product.id === id);
+        return this.getProducts().find(product => product.id === id);
     }
 
     save(product: any) {

app/_services/pub-sub.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class PubSubService {
+    private subjects: Subject<any>[] = [];
+
+    publish(eventName: string) {
+        // ensure a subject for the event name exists
+        this.subjects[eventName] = this.subjects[eventName] || new Subject<any>();
+
+        // publish event
+        this.subjects[eventName].next();
+    }
+
+    on(eventName: string): Observable<any> {
+        // ensure a subject for the event name exists
+        this.subjects[eventName] = this.subjects[eventName] || new Subject<any>();
+
+        // return observable 
+        return this.subjects[eventName].asObservable();
+    }
+}

app/app-routing.module.ts

@@ -10,7 +10,8 @@ const routes: Routes = [
         path: 'products',
         component: ProductListComponent,
         children: [
-            { path: 'add', component: ProductAddEditComponent }
+            { path: 'add', component: ProductAddEditComponent },
+            { path: 'edit/:id', component: ProductAddEditComponent }
         ]
     },
 

app/app.module.ts

@@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule, routedComponents } from './app-routing.module';
-import { ProductService } from './_services/index';
+import { ProductService, PubSubService } from './_services/index';
 
 @NgModule({
     imports: [
@@ -19,7 +19,8 @@ import { ProductService } from './_services/index';
         routedComponents
     ],
     providers: [
-        ProductService
+        ProductService,
+        PubSubService
     ],
     bootstrap: [AppComponent]
 })

app/home/home.component.html

@@ -1,2 +1,2 @@
 <h1>Home</h1>
-<p>Angular 2 (version 4) Animation Tutorial & Example</p>
+<p>Angular 2/4 - Animation Tutorial & Example</p>