Module 12: Navigation and Routing Additional Techniques.

Author: TXCodeDancer

APM/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
 import { StarComponent } from './shared/star.component';
 import { ProductDetailComponent } from './products/product-detail.component';
 import { WelcomeComponent } from './home/welcome.component';
+import { ProductDetailGuard } from './products/product-detail.guard';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,11 @@ import { WelcomeComponent } from './home/welcome.component';
     HttpClientModule,
     RouterModule.forRoot([
       { path: 'products', component: ProductListComponent },
-      { path: 'products/:id', component: ProductDetailComponent },
+      { 
+        path: 'products/:id',
+        canActivate: [ProductDetailGuard],
+        component: ProductDetailComponent 
+      },
       { path: 'welcome', component: WelcomeComponent },
       { path: '', redirectTo: 'welcome', pathMatch: 'full' },
       { path: '**', redirectTo: 'welcome', pathMatch: 'full'},

APM/src/app/products/product-detail.component.html

@@ -2,4 +2,11 @@
     <div class="card-header">
         {{pageTitle + ': ' + product.productName}}
     </div>
+    <div>
+        <button class="btn btn-outline-secondary"
+            (click)="onBack()"
+            style="width:80px">
+            <i class="fa fa-chevron-left"></i> Back
+        </button>
+    </div>
 </div>

APM/src/app/products/product-detail.component.spec.ts

@@ -1,14 +1,36 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { IProduct } from './products';
 
 @Component({
   templateUrl: './product-detail.component.html',
   styleUrls: ['./product-detail.component.css']
 })
 export class ProductDetailComponent implements OnInit {
+  pageTitle: string = 'Product Detail';
+  product: IProduct;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute,
+              private router: Router) { }
 
   ngOnInit() {
+    let id = +this.route.snapshot.paramMap.get('id');
+    this.pageTitle += `: ${id}`;
+    this.product = {
+      "productId": id,
+      "productName": "Leaf Rake",
+      "productCode": "GDN-0011",
+      "releaseDate": "March 19, 2019",
+      "description": "Leaf rake with 48-inch wooden handle.",
+      "price": 19.95,
+      "starRating": 3.2,
+      "imageUrl": "assets/images/leaf_rake.png"
+    }
+  }
+
+  onBack(): void {
+    this.router.navigate(['/products']);
   }
 
 }

APM/src/app/products/product-detail.component.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductDetailGuard implements CanActivate {
+  constructor(private router: Router) {}
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    let id = +next.url[1].path;
+    if (isNaN(id) || id < 1 ) {
+      alert("Invalide product Id");
+      this.router.navigate(['/products']);
+      return false;
+    };
+      return true;
+  }
+  
+}

APM/src/app/products/product-detail.guard.ts

@@ -42,7 +42,11 @@ <h4>Filtered by: {{listFilter}} </h4>
                                 [style.width.px]='imageWidth'
                                 [style.margin.px]='imageMargin'>
                         </td>
-                        <td>{{ product.productName }}</td>
+                        <td>
+                            <a [routerLink]="['/products', product.productId]">
+                                {{ product.productName }}
+                            </a>
+                        </td>
                         <td>{{ product.productCode | lowercase | convertToSpaces: '-' }}</td>
                         <td>{{ product.releaseDate }}</td>
                         <td>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</td>