Mortgage Calculator using HTML, CSS, TypeScript and Angular

What are you most proud of, and what would you do differently next time?

I am most proud of the responsive design and the refactoring of my code, which has made my application significantly more efficient and easier to read and maintain as compared to the initial version.

What challenges did you encounter, and how did you overcome them?

I originally developed the entire application in one component. However, the component files were quite large and difficult to read. I refactored the application into multiple components, which has made the code significantly easier to read and maintain.

The styling, however, is all in one global stylesheet. I didn't feel like going back and refactoring all of the styling into separate stylesheets (lol).

What specific areas of your project would you like help with?

I would appreciate any feedback on the structure of my application as I am new to Angular. Here's how I structured my application:

App component: This is my main component, which contains the structure for my mortgage calculator. Within the view of this component, I render all of the smaller components, each housing its individual views/logic of the form. Within my App component, I subscribe to the form group and the form submitted state, which were created within the service class. I am also holding these subscriptions within a subscription array so that I can unsubscribe when the component is destroyed (for best practices)

Components > form: In this folder, I have all of my individual form components, each with its own logic. Splitting the form into multiple components has made my code a lot easier to read, debug, and maintain. I believe this follows the separation of concerns software design principle, where each component in the software has only what it needs/is responsible for.

Components > form > forms-service: This service file contains all of my form's states and logic for updating, submitting, calculating, and formatting the outputs. Having all of the state and business logic in one service file made it significantly easier to debug or add features to any business logic/core functionality since I knew exactly where to look if I needed to make any changes to the business logic/core functionality.