- 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
- Youtube tutorial uses Angular v7 upgraded to v14.
- Angular material installation is now much easier than as shown in the video.
- 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 indocs
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
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: [email protected]