Expense Tracker Angular App

Overview

The Expense Tracker Angular App is a simple web application built with Angular that allows users to track their expenses. It provides features to add new expenses, view a list of existing expenses, and navigate through different sections of the application.

Screenshot

Table of Contents

• Expense Tracker Angular App
  • Overview
  • Screenshot
  • Table of Contents
  • Features
  • Getting Started
    • Prerequisites
    • Installation
  • Usage

Features

1. Add Expense: Users can add new expenses by providing a description and amount.

2. View Expenses: Users can view a list of all recorded expenses.

3. Delete Expense: Users can delete specific expenses from the list.

4. Navigation: The app includes a navigation bar with links to different sections, such as Home, Expenses, and About.

5. Routing: Angular routing is used to navigate between different views, creating a seamless single-page application experience.

6. Styling: Component-specific styling is implemented using Angular's view encapsulation, and attribute and structural directives are used for dynamic styling and class binding.

7. Custom Directive: A custom directive, appHighlight, is created and used to dynamically highlight certain elements.

8. Angular Forms: Angular forms are utilized for capturing and validating user input.

Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• Node.js
• Angular CLI

Installation

1. Clone the repository:

   git clone https://github.com/Michle99/expense-tracker-angular.git

2. Navigate to the project directory:

    cd expense-tracker-angular

3. Install dependencies:

    npm install

Usage

1. Start the Angular development server:

    ng serve

2. Open your browser and go to http://localhost:4200 to view the app.

3. Use the navigation links to explore different sections of the app.