/angular-budget-app

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

Primary LanguageTypeScriptMIT LicenseMIT

⚡ 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

📄 Table of contents

📚 General info

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

📷 Screenshots

Angular page Angular page

📶 Technologies

💾 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

📋 Status & To-do list

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

👏 Inspiration

📁 License

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

✉️ Contact