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

Prerequisites

• Node.js (v16 or higher)
• Angular CLI (v17.3.8)
• TypeScript (v5.4.2)

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

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.

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.

Navbar Component Code

Below mentioned is the Navbar Component through which we are demonstrating the navbar of our Expense Tracker which displays Expense Tracker by GFG as heading for the application having a white color text and Black Coloured Background.

Services

Below mentioned is the Expenses Service through which we are demonstrating an interface named as 'Expense' through which we can add and delete expenses.

Steps to Run the Application

ng serve --open 

Open your browser and navigate to http://localhost:4200

Output