angular demo example

src3/AngularUi/src/app/checkout/checkout.component.html

@@ -1,6 +1,17 @@
 <p>checkout works!</p>
 
-<div>
-    <label for="oid">ID: {{order.id}} | cost: {{order.cost}}</label><br/>
-    <input id="oid" [(ngModel)]="order.cost" placeholder="cost">
-  </div>
+<div *ngIf="selectedOrder">
+    <label for="oid">ID: {{selectedOrder.id}} | cost: {{selectedOrder.cost}}</label><br/>
+    <input id="oid" [(ngModel)]="selectedOrder.cost" placeholder="cost">
+</div>
+
+
+<h2>My Orders</h2>
+<ul class="orders">
+    <li *ngFor="let order of orders">
+      <button [class.selected]="order === selectedOrder" type="button" (click)="onSelect(order)" >
+      <span class="oid">{{order.id}}</span> - 
+      <span class="cost">{{order.cost}}</span>
+    </button>
+  </li>
+</ul>

src3/AngularUi/src/app/checkout/checkout.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Order } from '../order';
-
+import { ORDERS } from '../mock-orders';
 
 @Component({
   selector: 'app-checkout',
@@ -11,14 +11,15 @@ export class CheckoutComponent implements OnInit {
 
   constructor() { }
 
-  public test = "asdf";
-
-  order: Order = {
-    id: 123,  
-    cost: 9.50
-  };
+  orders = ORDERS;
+  selectedOrder?: Order;
 
   ngOnInit(): void {
   }
 
+
+  onSelect(order: Order): void {
+    this.selectedOrder = order;
+  }
+
 }

src3/AngularUi/src/app/mock-orders.ts

@@ -0,0 +1,7 @@
+import { Order } from './order';
+
+export const ORDERS: Order[] = [
+  { id: 12, cost: 19.50 },
+  { id: 13, cost: 21.30 },
+  { id: 14, cost: 5.35 }
+];