Add detail and checkout component and routing

src/app/app.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app',
-  template: "<store></store>"
+  template: "<router-outlet></router-outlet>"
 })
 export class AppComponent {}

src/app/app.module.ts

@@ -1,16 +1,23 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { StoreModule } from './store/store.module';
-
 import { AppComponent } from './app.component';
+import { StoreComponent } from './store/store.component';
+import { CheckoutComponent } from './store/checkout.component';
+import { CartDetailComponent } from './store/cartDetail.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
+  imports: [BrowserModule, StoreModule,
+    RouterModule.forRoot([
+      { path: "store", component: StoreComponent },
+      { path: "cart", component: CartDetailComponent },
+      { path: "checkout", component: CheckoutComponent },
+      { path: "**", redirectTo: "/store" }
+    ])],
   declarations: [
     AppComponent
   ],
-  imports: [
-    BrowserModule, StoreModule
-  ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/store/cartDetail.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    template:`<div><h3 class="bg-info p-1 text-white">Cart Detail Component</h3></div>`
+})
+
+export class CartDetailComponent {}

src/app/store/cartSummary.component.html

@@ -9,7 +9,7 @@
             (empty)
         </span>
     </small>
-    <button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0">
+    <button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0" routerLink="/cart">
         <i class="fa fa-shopping-cart"></i>
     </button>
 </div>

src/app/store/checkout.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    template:`<div><h3 class="bg-info p-1 text-white">Checkout Component</h3></div>`
+})
+
+export class CheckoutComponent {}

src/app/store/store.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { Product } from "../model/product.model";
 import { ProductRepository } from "../model/product.repository";
 import { Cart } from "../model/cart.model";
+import { Router } from "@angular/router";
 
 @Component({
     selector: "store",
@@ -14,7 +15,7 @@ export class StoreComponent {
     public productsPerPage = 4;
     public selectedPage = 1;
 
-    constructor(private repository: ProductRepository, private cart: Cart) {}
+    constructor(private repository: ProductRepository, private cart: Cart, private router: Router) {}
 
     get products(): Product[] {
         let pageIndex = (this.selectedPage - 1) * this.productsPerPage;
@@ -44,6 +45,7 @@ export class StoreComponent {
 
     addProductToCart(product: Product) {
         this.cart.addLine(product, 1);
+        this.router.navigateByUrl("/cart");
     }
 
 }

src/app/store/store.module.ts

@@ -4,11 +4,14 @@ import { FormsModule } from "@angular/forms";
 import { ModelModule } from "../model/model.module";
 import { StoreComponent } from "./store.component";
 import { CartSummaryComponent } from "./cartSummary.component";
+import { CartDetailComponent } from "./cartDetail.component";
+import { CheckoutComponent } from "./checkout.component";
+import { RouterModule } from "@angular/router";
 
 @NgModule({
-    imports: [ModelModule, BrowserModule, FormsModule],
-    declarations: [StoreComponent, CartSummaryComponent],
-    exports: [StoreComponent, CartSummaryComponent]
+    imports: [ModelModule, BrowserModule, FormsModule, RouterModule],
+    declarations: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent],
+    exports: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent]
 })
 
 export class StoreModule {}