Create web app with Angular 12, .NET Core Web API & Mongo DB

Connect to a MongoDB Atlas cluster with Compass, create a database and collections: department details (id, name) and employee details (id, name, department, date of joining, profile file name).

Create a dotnet core web api project in Visual Studio and review key files like dependencies, launchSettings.json, appsettings.json, program.cs, startup.cs, and controllers to configure the web host and dependency injection.

Enable cors by default in startup, relax cross-domain security, and set json serializer as default with a possible NuGet package import; run the project and verify json output.

Install the MongoDB Driver NuGet package and set connection string, then create a models folder with department (id, name) and employee (id, name, department, date of joining, photo file name).

Build and test department screen APIs with a mongo-backed controller, using dependency injection for settings, and implement get, post, put, and delete methods tested in Postman.

Implement the employee details API methods by creating an empty API controller and copying the department controller, then test get, post, put, and delete operations.

Create a post route to upload photos into a photos folder configured via startup. Inject the app path, save the first form file, and return the file name.

Install Angular CLI and verify version 12 to create an Angular project with routing. Understand the project structure, including components, global styles, and bootstrap integration, then run ng serve --open.

Implement routing and navigation in an Angular 12 app by creating three pages—home, department, and employee—configuring components, app routing, http client, and forms, and adding a navigation menu.

Bootstrap table in department page, configure environment URL, import http client, create departments array, fetch via get department API on init, refresh, and render with edit and delete actions.

Create a modal popup window to add or edit departments using a shared model, with department id and department name fields, and wire post, put, and delete methods with confirmation.

Complete the employee details screen by reusing the department page, implement an employees array, and add an employee model with id, name, department dropdown, date of joining, and profile picture.

Implement sorting and filtering for the department table using the string includes method, defining filter inputs, a backup data array, and a column-based sort function with ascending or descending order.