An Angular 20 application that demonstrates the regular HttpClient with Observables.
It uses a .NET/C# WebAPI as Backend and a PostgreSQL database.
The .NET/C# WebAPI stores Paintings/images and thumbnails in the database as base64-strings.
The Angular application can fetch, filter, create, update and delete paintings, styles and artists.
This application can upload images to the .NET/C# WebAPI with the use of IFormFile.
Using the SixLabors.ImageSharp library, uploaded images are resized to thumbnails.
See the images in the root of this project for examples.
See the folder: Docker_PostgreSQL with the docker-compose file.
Command to add the docker container:
docker-compose up --build -d
Install the dotnet ef-tool - version: 8.0.11 or above
When the tool is installed, run the command for a database migration:
dotnet ef database update
For more information see the link below:
https://learn.microsoft.com/en-us/ef/core/cli/dotnet
Command to install
npm install
or shorter:
npm i
Command to run the application:
ng serve --open
or shorter:
ng s --o
August 2025
Backend changes:
- Added more works of art.
- Updated package SixLabors.ImageSharp
Frontend changes:
- Fixed some typing errors.
- Moved the (collapsable) menu to the left side.
- Updated packages.
- Changed the scroller.
- Added NgRx signalStore.
- Moved a folder and various minor changes.
July 2025
Backend changes:
- Added new works of Art. New migration for Database.
- Added an Endpoint, Service and Repository that returns a paged list.
Frontend changes:
- Upgrade to Angular 20.
- Using the keyword readonly for properties initialized by Angular (input(), output(), model()).
- Using the keyword protected for properties that are only accessible in the template.
- Removed unnecessary package @angular/platform-browser-dynamic.
- Changed to Zoneless (no Zone.js).
- Using smooth scrolling for scroll to top.
- Added Pager and Pagination.
- Added a separate file for a shared constant.