added comments

Author: cornflourblue

app/_animations/fade-in.animation.ts

@@ -1,11 +1,14 @@
-import { trigger, state, animate, transition, style } from '@angular/animations';
+// import the required animation functions from the angular animations module
+import { trigger, state, animate, transition, style } from '@angular/animations';
 
 export const fadeInAnimation =
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
     trigger('fadeInAnimation', [
+
         // route 'enter' transition
         transition(':enter', [
 
-            // styles at start of transition
+            // css styles at start of transition
             style({ opacity: 0 }),
 
             // animation and styles at end of transition

app/_animations/slide-in-out.animation.ts

@@ -1,6 +1,8 @@
-import { trigger, state, animate, transition, style } from '@angular/animations';
+// import the required animation functions from the angular animations module
+import { trigger, state, animate, transition, style } from '@angular/animations';
 
 export const slideInOutAnimation =
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
     trigger('slideInOutAnimation', [
 
         // end state styles for route container (host)

app/home/home.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
 
+// import fade in animation
 import { fadeInAnimation } from '../_animations/index';
 
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'home.component.html',
+
+    // make fade in animation available to this component
     animations: [fadeInAnimation],
+
+    // attach the fade in animation to the host (root) element of this component
     host: { '[@fadeInAnimation]': '' }
 })
 

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

@@ -1,18 +1,24 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
-import { slideInOutAnimation } from '../_animations/index';
 import { ProductService, PubSubService } from '../_services/index';
 
+// import slide in/out animation
+import { slideInOutAnimation } from '../_animations/index';
+
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'product-add-edit.component.html',
+
+    // make slide in/out animation available to this component
     animations: [slideInOutAnimation],
+
+    // attach the slide in/out animation to the host (root) element of this component
     host: { '[@slideInOutAnimation]': '' }
 })
 
 export class ProductAddEditComponent implements OnInit {
-    title = "Add Product";
+    title = 'Add Product';
     product: any = {};
 
     constructor(

app/products/product-list.component.ts

@@ -1,13 +1,19 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
-import { fadeInAnimation } from '../_animations/index';
 import { ProductService, PubSubService } from '../_services/index';
 
+// import fade in animation
+import { fadeInAnimation } from '../_animations/index';
+
 @Component({
     moduleId: module.id.toString(),
     templateUrl: 'product-list.component.html',
+
+    // make fade in animation available to this component
     animations: [fadeInAnimation],
+
+    // attach the fade in animation to the host (root) element of this component
     host: { '[@fadeInAnimation]': '' }
 })