AndrewJBateman / angular-budget-app

:clipboard: Angular tutorial app to create a simple budget calculator. Tutorial Code by Devstackr.

⚡ Angular Budget App - Tutorial Code by Devstackr

• Angular tutorial app to add items to a budget list.
• Balance shown at top. Inputs section where an item can be added - positive numbers are income and negative numbers are expenses - shown in separate columns.
• Clicking on a budget item opens a modal where the item amount and description can be edited.
• All code by Devstackr from Youtube Tutorial Angular - Build a Budget Calculator Application.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Budget App - Tutorial Code by Devstackr
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Youtube tutorial uses Angular v7 upgraded to v14.
• Angular material installation is now much easier than as shown in the video.

📷 Screenshots

📶 Technologies

• Angular v15
• Angular Material v15
• Bulma v0.9.4 CSS framework
• rxjs v7 reactive programming library

💾 Setup

• npm i to install dependencies
• To start the server on localhost://4200 type: 'ng serve'
• npm run build to create build files in docs folder

💻 Code Examples

• Modal created using Angular MatDialog service.

onCardClicked(item: BudgetItem) {
  const dialogRef = this.dialog.open(EditItemModalComponent, {
    width: '580px',
    data: item
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      this.update.emit({
        old: item,
        new: result
      });
    }
  })
}

🆒 Features

• Angular Material Dialog modal used to edit budget items.

📋 Status & To-do list

• Status: Working in desktop mode but does not resize correctly to mobile size.
• To-do: Nothing

👏 Inspiration

• Angular - Build a Budget Calculator Application
• Devstackr: Github repo

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]