added material design components

src/app/components/expense-list/expense-list.component.ts

@@ -1,17 +1,43 @@
 import { Component, computed } from '@angular/core';
 import { ExpenseService } from '../../services/expense.service';
-import { ExpenseComponent } from '../expense/expense.component';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable
+} from '@angular/material/table';
+import {CurrencyPipe, DatePipe} from '@angular/common';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 
 @Component({
   selector: 'app-expense-list',
   imports: [
-    ExpenseComponent
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    DatePipe,
+    MatCell,
+    MatCellDef,
+    CurrencyPipe,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatCard,
+    MatCardHeader,
+    MatCardTitle,
+    MatCardContent
   ],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss',
 })
 export class ExpenseListComponent {
   protected expenses = computed(() => this.expensesService.expenses())
+  protected columns = ['date', 'amount', 'category', 'merchant'];
 
   public constructor(private readonly expensesService: ExpenseService) { }
 }