End of lesson 12

Author: brianbyrnebg

APM-Start/src/app/app.component.ts

@@ -3,9 +3,15 @@ import { Component } from "@angular/core";
 @Component({
   selector: 'pm-root',
   template: `
-  <div>
-    <h1>{{pageTitle}}</h1>
-    <pm-products>My first component</pm-products>
+    <nav class='navbar navbar-expand navbar-light bg-light'>
+    <a class='bavbar-brand'>{{pageTitle}}</a>
+    <ul class='nav nav-pills'>
+      <li><a class='nav-link' routerLink='/welcome'>Home</a></li>
+      <li><a class='nav-link' routerLink='/products'>Product List</a></li>
+    </ul>
+  </nav>
+  <div class='container'>
+    <router-outlet></router-outlet>
   </div>
   `
 })

APM-Start/src/app/app.module.ts

@@ -7,18 +7,34 @@ import { AppComponent } from './app.component';
 import { ProductListComponent } from './products/product-list.component';
 import { StarComponent } from './shared/star.component';
 import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
+import { ProductDetailComponent } from './products/product-detail.component';
+import { WelcomeComponent } from './home/welcome.component';
+import { RouterModule } from '@angular/router';
+import { ProductDetailGuard } from './products/product-detail.guard';
 
 @NgModule({
   declarations: [
     AppComponent,
     ProductListComponent,
     ConvertToSpacesPipe,
-    StarComponent
+    StarComponent,
+    ProductDetailComponent,
+    WelcomeComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
+    RouterModule.forRoot([
+      { path: 'products', component: ProductListComponent},
+      { 
+        path: 'products/:id',
+        component: ProductDetailComponent,
+        canActivate: [ProductDetailGuard]
+      },
+      { path: 'welcome', component: WelcomeComponent },
+      { path: '**', redirectTo: 'welcome', pathMatch: 'full'} //
+    ])
   ],
   bootstrap: [AppComponent]
 })

APM-Start/src/app/products/product-detail.component.css

@@ -0,0 +1,12 @@
+<div class='card'>
+    <div class='card-header'>
+        {{pageTitle + ': ' + product?.productName}}
+    </div>
+    <div class='card-footer'>
+        <button class='btn btn-outlline-secondary' 
+                style='width:80px'
+                (click)='onBack()'>
+            <i class='fa fa-chevron-left'></i>Back
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDetailComponent } from './product-detail.component';
+
+describe('ProductDetailComponent', () => {
+  let component: ProductDetailComponent;
+  let fixture: ComponentFixture<ProductDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductDetailComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IProduct } from './product';
+
+@Component({
+  selector: 'pm-product-detail',
+  templateUrl: './product-detail.component.html',
+  styleUrls: ['./product-detail.component.css']
+})
+export class ProductDetailComponent implements OnInit {
+  product: IProduct | undefined;
+  constructor(private route: ActivatedRoute, private router: Router) {}
+
+  pageTitle: string = 'Product Details';
+
+  ngOnInit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.pageTitle += `: ${id}`;
+
+    // TODO remove hard coded product:
+    this.product = {
+      'productId': id,
+      'productName': 'Blah',
+      'productCode': '010202',
+      'releaseDate': 'March 19, 2021',
+      'description': 'Leaf Rake',
+      'price': 19.95,
+      'starRating': 3.2,
+      'imageUrl': 'assets/images/leaf_rake.png'
+    };
+  }
+
+  onBack(): void {
+    this.router.navigate(['/products']);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProductDetailGuard } from './product-detail.guard';
+
+describe('ProductDetailGuard', () => {
+  let guard: ProductDetailGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(ProductDetailGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductDetailGuard implements CanActivate {
+  constructor(private router: Router) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      const id = Number(route.paramMap.get('id'));
+      if(isNaN(id) || id < 1) {
+        alert('Invalid product id');
+        this.router.navigate(['/products']);
+        return false;
+      }
+    return true;
+  }
+}

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

@@ -31,7 +31,11 @@ <h4>Filtered by: </h4>
             </tr>
             <tr *ngFor="let product of filteredProducts">
               <td><img *ngIf='showImage' [src]='product.imageUrl' [title]='product.productName' [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: 'GBP' : 'symbol' : '1.2-2'}}</td>

APM-Start/src/app/products/product-list.component.html

@@ -4,7 +4,6 @@ import { IProduct } from "./product";
 import { ProductService } from "./product.service";
 
 @Component({
-    selector: 'pm-products',
     templateUrl: './product-list.component.html',
     styleUrls: ['./product-list.component.css']
 })