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>

app/home/home.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
-import { fadeIn } from '../_helpers/animations';
+
+import { fadeInAnimation } from '../_animations/index';
 
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'home.component.html',
-    animations: [fadeIn()],
-    host: { '[@fadeIn]': '' }
+    animations: [fadeInAnimation],
+    host: { '[@fadeInAnimation]': '' }
 })
 
 export class HomeComponent {

app/products/product-add-edit.component.html

@@ -1,14 +1,14 @@
 <div class="side-form">
     <h1>{{title}}</h1>
     <div class="form-container">
-        <form method="post">
+        <form (ngSubmit)="saveProduct()">
             <div class="form-group">
                 <label for="name">Name</label>
-                <input type="text" id="name" class="form-control" required />
+                <input type="text" name="name" [(ngModel)]="product.name" class="form-control" required />
             </div>
             <div class="form-group">
                 <label for="name">Price</label>
-                <input type="text" id="price" class="form-control" required />
+                <input type="text" name="price" [(ngModel)]="product.price" class="form-control" required />
             </div>
             <div class="form-group">
                 <a class="btn btn-default" routerLink="/products">Cancel</a>

app/products/product-add-edit.component.ts

@@ -1,13 +1,42 @@
-import { Component } from '@angular/core';
-import { slideInOut } from '../_helpers/animations';
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { slideInOutAnimation } from '../_animations/index';
+import { ProductService, PubSubService } from '../_services/index';
 
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'product-add-edit.component.html',
-    animations: [slideInOut()],
-    host: { '[@slideInOut]': '' }
+    animations: [slideInOutAnimation],
+    host: { '[@slideInOutAnimation]': '' }
 })
 
-export class ProductAddEditComponent {
-    title: string = "Add Product";
+export class ProductAddEditComponent implements OnInit {
+    title = "Add Product";
+    product: any;
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private productService: ProductService,
+        private pubSubService: PubSubService) { }
+
+    ngOnInit() {
+        let productId = Number(this.route.snapshot.params['id']);
+        if (productId) {
+            this.title = 'Edit Product';
+            this.product = this.productService.getById(productId);
+        }
+    }
+
+    saveProduct() {
+        // save product
+        this.productService.save(this.product);
+
+        // redirect to users view
+        this.router.navigate(['products']);
+
+        // publish event so list controller can refresh
+        this.pubSubService.publish('products-updated');
+    }
 }

app/products/product-list.component.html

@@ -7,7 +7,7 @@
         <th class="delete-column"></th>
     </tr>
     <tr *ngFor="let product of products">
-        <td><a>{{product.name}}</a></td>
+        <td><a [routerLink]="['edit', product.id]">{{product.name}}</a></td>
         <td>${{product.price}}</td>
         <td><a class="btn btn-xs btn-danger">Delete</a></td>
     </tr>

app/products/product-list.component.ts

@@ -1,19 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
 
-import { fadeIn } from '../_helpers/animations';
-import { ProductService } from '../_services/index';
+import { fadeInAnimation } from '../_animations/index';
+import { ProductService, PubSubService } from '../_services/index';
 
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'product-list.component.html',
-    animations: [fadeIn()],
-    host: { '[@fadeIn]': '' }
+    animations: [fadeInAnimation],
+    host: { '[@fadeInAnimation]': '' }
 })
 
-export class ProductListComponent implements OnInit {
+export class ProductListComponent implements OnInit, OnDestroy {
     products: any[];
+    subscription: Subscription;
 
-    constructor(private productService: ProductService) { }
+    constructor(
+        private productService: ProductService,
+        private pubSubService: PubSubService) { }
 
     deleteProduct(id: number) {
         this.productService.delete(id);
@@ -24,7 +28,12 @@ export class ProductListComponent implements OnInit {
         this.loadProducts();
 
         // reload products when updated
-        // $scope.$on('products-updated', loadProducts);
+        this.subscription = this.pubSubService.on('products-updated').subscribe(() => this.loadProducts());
+    }
+
+    ngOnDestroy() {
+        // unsubscribe to ensure no memory leaks
+        this.subscription.unsubscribe();
     }
 
     private loadProducts() {

index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <base href="/" />
-    <title>Angular 2 Animation Tutorial & Example</title>
+    <title>Angular 2/4 - Animation Tutorial & Example</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

systemjs.config.js

@@ -1,5 +1,5 @@
 /**
- * System configuration for Angular 2 samples
+ * System configuration for Angular 2/4 samples
  * Adjust as necessary for your application needs.
  */
 (function (global) {