Basic API consumption support and refactored UI to use material (#1)

Co-authored-by: Joe Arndt <jmarndt@users.noreply.github.com>
Reviewed-on: #1

src/app/pages/expenses/expense-page.component.html

@@ -1,3 +1,4 @@
 <div class="expenses-container">
+  <app-expense />
   <app-expense-list />
 </div>

src/app/pages/expenses/expense-page.component.scss

@@ -0,0 +1,5 @@
+.expenses-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/app/pages/expenses/expense-page.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ExpenseListComponent } from '../../components/expense-list/expense-list.component';
+import { ExpenseComponent } from '../../components/expense/expense.component';
+
+@Component({
+  selector: 'app-expenses',
+  imports: [
+    ExpenseListComponent,
+    ExpenseComponent
+  ],
+  templateUrl: './expense-page.component.html',
+  styleUrl: './expense-page.component.scss'
+})
+export class ExpensePage { }

src/app/pages/expenses/expenses.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { ExpenseList } from '../../components/expense-list/expense-list';
-
-@Component({
-  selector: 'app-expenses',
-  imports: [
-    ExpenseList
-  ],
-  templateUrl: './expenses.html',
-  styleUrl: './expenses.scss'
-})
-export class Expenses { }

src/app/pages/home/home-page.component.html

@@ -1,7 +1,7 @@
 <div class="home-container">
   <ul>
     <li>
-      <a routerLink="expenses">Expenses</a>
+      <a routerLink="expenses">ExpenseService</a>
     </li>
   </ul>
 </div>

src/app/pages/home/home-page.component.ts

@@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
   imports: [
     RouterLink
   ],
-  templateUrl: './home.html',
-  styleUrl: './home.scss',
+  templateUrl: './home-page.component.html',
+  styleUrl: './home-page.component.scss',
 })
-export class Home { }
+export class HomePage { }