Expense Tracker Using Angular

Managing expenses efficiently is very important for personal finance. In this article, we'll walk through creating a simple yet effective Expense Tracker application using Angular 17. This project will showcase Angular's powerful features and provide a hands-on example of how to manage financial data.

Project Preview

Screenshot-2024-08-11-221946 — Expense Tracker Using Angular

Prerequisites

Approach

We’ll create Angular components for adding, listing, and managing expenses.
We’ll use Angular services to handle data interactions, such as saving expenses to a local storage or a backend API.
Angular modules will help organize our application and manage different parts of the app.

Steps to Create the Application

Step 1: Install Required Modules

First, let's set up our Angular project and install the necessary modules. Open your terminal and run the following commands:

ng new expense-tracker
cd expense-tracker
npm install tailwindcss
npm install postcss

Step 2 : Configure TailwindCSS and PostCSS

1. Create a tailwind.config.js file in the root directory by using the following command and add the following code in the file.

npx tailwindcss init

 module.exports = {
    content: ['./src/**/*.{html,ts}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

2. Create a postcss.config.js(src/postcss.config.js) file in the root directory:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

3. Add TailwindCSS to your styles.css/ style.less:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3: Setting Up the Project

Next, let’s initialize our project and set up the basic components:

1. Create components for adding and listing expenses:

ng generate component expense-list
ng generate component navbar

2: Create a service to handle expense data. Run:

ng generate service services/expense

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "postcss": "^8.4.41",
    "rxjs": "~7.8.0",
    "tailwindcss": "^3.4.9",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Folder Structure

Screenshot-2024-08-11-223813 — Folder Structure

Example: Create the required files as seen in the folder structure and add the following codes.

App Component Code

Below mentioned is the App Component which is the first component which gets loaded which an Angular Application is built. It initalizes all other components in order to run them.

HTML

<!-- /src/app/app.component.html -->
<router-outlet />

HTML

<!-- index.html -->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ExpenseTracker</title>
    <base href="/">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="
    https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>

<body>
    <app-root></app-root>
</body>

</html>

CSS

/* src/style.less*/
@tailwind base;
@tailwind components;
@tailwind utilities;

JavaScript

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { ExpenseListComponent } from './expense-list/expense-list.component';

export const routes: Routes = [
    { path: '', redirectTo: '/expenses', pathMatch: 'full' },
    { path: 'expenses', component: ExpenseListComponent },

];

JavaScript

// src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.less'
})
export class AppComponent {
    title = 'expense-tracker';
}

Expense-List Component Code

Below mentioned is the Expense-List Component through which displays the list of Expenses added by the user having Account, Category, Expense, Amount and Action as the details of the expenses.

HTML

<!-- src/app/expense-list.component.html -->
<!-- navbar -->
<app-navbar></app-navbar>
<!-- Add button to trigger expense form -->
<button (click)="openExpenseForm()" class="add-expense-button">
    <i class="fas fa-plus"></i>
</button>

<!-- Display list of expenses -->
<div class="p-4  flex justify-center" *ngIf="expenses.length  > 0; else noExpenses">
    <div *ngIf="!isFormVisible">
        <div class=" mt-20 grid grid-cols-5 gap-10 bg-orange-500 p-4 text-white rounded-md shadow-md">
            <