From 2c662365a4e67ad843a6b48cd5a9e71bc1de993f Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 14:43:21 -0600
Subject: [PATCH 1/6] ng generate component tsteele-addition --skip-tests

---
 src/app/tsteele-addition/tsteele-addition.css  |  0
 src/app/tsteele-addition/tsteele-addition.html |  1 +
 src/app/tsteele-addition/tsteele-addition.ts   | 11 +++++++++++
 3 files changed, 12 insertions(+)
 create mode 100644 src/app/tsteele-addition/tsteele-addition.css
 create mode 100644 src/app/tsteele-addition/tsteele-addition.html
 create mode 100644 src/app/tsteele-addition/tsteele-addition.ts

diff --git a/src/app/tsteele-addition/tsteele-addition.css b/src/app/tsteele-addition/tsteele-addition.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/tsteele-addition/tsteele-addition.html b/src/app/tsteele-addition/tsteele-addition.html
new file mode 100644
index 0000000..b50bc3c
--- /dev/null
+++ b/src/app/tsteele-addition/tsteele-addition.html
@@ -0,0 +1 @@
+<p>tsteele-addition works!</p>
diff --git a/src/app/tsteele-addition/tsteele-addition.ts b/src/app/tsteele-addition/tsteele-addition.ts
new file mode 100644
index 0000000..f1d6b8b
--- /dev/null
+++ b/src/app/tsteele-addition/tsteele-addition.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tsteele-addition',
+  imports: [],
+  templateUrl: './tsteele-addition.html',
+  styleUrl: './tsteele-addition.css',
+})
+export class TsteeleAddition {
+
+}

From a6497260bc65f88d2f5bc135d6790e596265672a Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 14:46:30 -0600
Subject: [PATCH 2/6] Showing my component

---
 src/app/app.html | 2 ++
 src/app/app.ts   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/app/app.html b/src/app/app.html
index 4cda61c..6b34168 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -8,3 +8,5 @@ <h1>
 <app-cbares-dice-roll></app-cbares-dice-roll>
 <br />
 <app-zsmuckerbryan-checklist></app-zsmuckerbryan-checklist>
+<br />
+<app-tsteele-addition></app-tsteele-addition>
diff --git a/src/app/app.ts b/src/app/app.ts
index 482d152..c77584f 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -3,6 +3,7 @@ import { PizzaToppings } from './pizza-toppings/pizza-toppings';
 import { ZsmuckerbryanChecklist } from './zsmuckerbryan-checklist/zsmuckerbryan-checklist';
 import { TsteeleMultiplication } from './tsteele-multiplication/tsteele-multiplication';
 import { CbaresDiceRoll } from './cbares-dice-roll/cbares-dice-roll';
+import { TsteeleAddition } from './tsteele-addition/tsteele-addition';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +12,7 @@ import { CbaresDiceRoll } from './cbares-dice-roll/cbares-dice-roll';
     TsteeleMultiplication,
     CbaresDiceRoll,
     ZsmuckerbryanChecklist,
+    TsteeleAddition,
   ],
   templateUrl: './app.html',
   styleUrl: './app.css'

From e55ee1bce32a3527d2a4c9102a510baee47e2fe5 Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 14:51:46 -0600
Subject: [PATCH 3/6] Placeholders there...

Now figure out MD inputs and button...

Then make work...
---
 src/app/app.html                              |  2 +-
 .../tsteele-addition/tsteele-addition.html    | 22 ++++++++++++++++++-
 src/app/tsteele-addition/tsteele-addition.ts  |  5 ++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/app.html b/src/app/app.html
index 6b34168..c031dbf 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -9,4 +9,4 @@ <h1>
 <br />
 <app-zsmuckerbryan-checklist></app-zsmuckerbryan-checklist>
 <br />
-<app-tsteele-addition></app-tsteele-addition>
+<app-tsteele-addition></app-tsteele-addition>
\ No newline at end of file
diff --git a/src/app/tsteele-addition/tsteele-addition.html b/src/app/tsteele-addition/tsteele-addition.html
index b50bc3c..d0bac64 100644
--- a/src/app/tsteele-addition/tsteele-addition.html
+++ b/src/app/tsteele-addition/tsteele-addition.html
@@ -1 +1,21 @@
-<p>tsteele-addition works!</p>
+<mat-card
+    appearance="outlined"
+>
+    <mat-card-header>
+        <mat-card-title>
+            Tom's Addition Component
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <br />
+        <input type="number" />
+        +
+        <input type="number" />
+        &nbsp;
+        <button>
+            =
+        </button>
+        &nbsp;
+        0
+    </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/tsteele-addition/tsteele-addition.ts b/src/app/tsteele-addition/tsteele-addition.ts
index f1d6b8b..e4978a9 100644
--- a/src/app/tsteele-addition/tsteele-addition.ts
+++ b/src/app/tsteele-addition/tsteele-addition.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-tsteele-addition',
-  imports: [],
+  imports: [
+    MatCardModule,
+  ],
   templateUrl: './tsteele-addition.html',
   styleUrl: './tsteele-addition.css',
 })

From f3f7ab38dfc03560eccd8cd3738635fb80e808fd Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 14:56:45 -0600
Subject: [PATCH 4/6] Styled inputs and buttons, good enough...

---
 .../tsteele-addition/tsteele-addition.html    | 24 ++++++++++++++++---
 src/app/tsteele-addition/tsteele-addition.ts  |  6 +++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/tsteele-addition/tsteele-addition.html b/src/app/tsteele-addition/tsteele-addition.html
index d0bac64..12d7c36 100644
--- a/src/app/tsteele-addition/tsteele-addition.html
+++ b/src/app/tsteele-addition/tsteele-addition.html
@@ -8,11 +8,29 @@
     </mat-card-header>
     <mat-card-content>
         <br />
-        <input type="number" />
+        <mat-form-field>
+            <mat-label>
+                Number One
+            </mat-label>
+            <input 
+                matInput 
+                value="2"
+            />
+        </mat-form-field>
         +
-        <input type="number" />
+        <mat-form-field>
+            <mat-label>
+                Number Two
+            </mat-label>
+            <input 
+                matInput 
+                value="2"
+            />
+        </mat-form-field>
         &nbsp;
-        <button>
+        <button
+            matButton="outlined"
+        >
             =
         </button>
         &nbsp;
diff --git a/src/app/tsteele-addition/tsteele-addition.ts b/src/app/tsteele-addition/tsteele-addition.ts
index e4978a9..59fc4df 100644
--- a/src/app/tsteele-addition/tsteele-addition.ts
+++ b/src/app/tsteele-addition/tsteele-addition.ts
@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-tsteele-addition',
   imports: [
     MatCardModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   templateUrl: './tsteele-addition.html',
   styleUrl: './tsteele-addition.css',

From a5f70739be03ea620d01a498823f964b11d970a5 Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 15:01:35 -0600
Subject: [PATCH 5/6] Initialize numbers and total or sum...

---
 src/app/tsteele-addition/tsteele-addition.html | 6 +++---
 src/app/tsteele-addition/tsteele-addition.ts   | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/tsteele-addition/tsteele-addition.html b/src/app/tsteele-addition/tsteele-addition.html
index 12d7c36..c8d34ee 100644
--- a/src/app/tsteele-addition/tsteele-addition.html
+++ b/src/app/tsteele-addition/tsteele-addition.html
@@ -14,7 +14,7 @@
             </mat-label>
             <input 
                 matInput 
-                value="2"
+                [value]="numberOne()"
             />
         </mat-form-field>
         +
@@ -24,7 +24,7 @@
             </mat-label>
             <input 
                 matInput 
-                value="2"
+                [value]="numberTwo()"
             />
         </mat-form-field>
         &nbsp;
@@ -34,6 +34,6 @@
             =
         </button>
         &nbsp;
-        0
+        {{ sum() }}
     </mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/src/app/tsteele-addition/tsteele-addition.ts b/src/app/tsteele-addition/tsteele-addition.ts
index 59fc4df..986556a 100644
--- a/src/app/tsteele-addition/tsteele-addition.ts
+++ b/src/app/tsteele-addition/tsteele-addition.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -17,4 +17,8 @@ import { MatInputModule } from '@angular/material/input';
 })
 export class TsteeleAddition {
 
+  protected readonly numberOne = signal(1);
+  protected readonly numberTwo = signal(1);
+  protected readonly sum = signal(2);
+
 }

From e61f32bd497cee1061815cee309d49ff42ec10b3 Mon Sep 17 00:00:00 2001
From: tsteelematc <tsteele@madisoncollege.edu>
Date: Fri, 6 Mar 2026 15:24:33 -0600
Subject: [PATCH 6/6] Working, phew : - )

---
 src/app/tsteele-addition/tsteele-addition.html | 5 +++++
 src/app/tsteele-addition/tsteele-addition.ts   | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/app/tsteele-addition/tsteele-addition.html b/src/app/tsteele-addition/tsteele-addition.html
index c8d34ee..c40e6e7 100644
--- a/src/app/tsteele-addition/tsteele-addition.html
+++ b/src/app/tsteele-addition/tsteele-addition.html
@@ -13,8 +13,10 @@
                 Number One
             </mat-label>
             <input 
+                type="number"
                 matInput 
                 [value]="numberOne()"
+                (input)="updateNumberOne($event.target.value)" 
             />
         </mat-form-field>
         +
@@ -23,13 +25,16 @@
                 Number Two
             </mat-label>
             <input 
+                type="number"
                 matInput 
                 [value]="numberTwo()"
+                (input)="updateNumberTwo($event.target.value)" 
             />
         </mat-form-field>
         &nbsp;
         <button
             matButton="outlined"
+            (click)="add()"
         >
             =
         </button>
diff --git a/src/app/tsteele-addition/tsteele-addition.ts b/src/app/tsteele-addition/tsteele-addition.ts
index 986556a..48d94a1 100644
--- a/src/app/tsteele-addition/tsteele-addition.ts
+++ b/src/app/tsteele-addition/tsteele-addition.ts
@@ -21,4 +21,9 @@ export class TsteeleAddition {
   protected readonly numberTwo = signal(1);
   protected readonly sum = signal(2);
 
+  protected readonly updateNumberOne = (num: string) => this.numberOne.set(Number(num));
+  protected readonly updateNumberTwo = (num: string) => this.numberTwo.set(Number(num));
+
+  protected readonly add = () => this.sum.set(this.numberOne() + this.numberTwo());
+
 }