We have a similar screen which needs to be developed :
https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode
with the following feature :
I am confused on how to approach this screen.
Can someone please help me out or point out a similar example which i can reference?
I think your question is about 2 fields :
UX Design and components organization
First of all, I think to split correctly your components to do it, atomic design methodology is very good. In your case, you have a lot of information for each column. So each column need to have a new page to update informations.
See more : https://medium.muz.li/atomic-design-methodology-166261ce47c2
But honestly, I'm not a specialist for this part, It's better to post this questions on uxstackexchange.
Organization and way to manage api calls in Angular app
See Atomic design (clean architecture) for Angular here : https://medium.com/weekly-webtips/angular-clean-arquitecture-d40e9c50f51
I think in your app, the best way to manage data + call api is to implement ngrx store. Because you will have a lot of informations and a lot of call api to manage.
So It's very a good option to implement directly ngrx store to manage this part of your app. And you already use rxjs, so it's the same concept but with a store to manage global state in your entire app.
See more : https://v9.ngrx.io/guide/store