⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

• ⚡ 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

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

Angular page Angular page

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

• 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

• 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
 });
 }
 })
}

• Angular Material Dialog modal used to edit budget items.

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

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

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

• Repo created by ABateman, email: gomezbateman@yahoo.com