Day 9 was spent on final edits to the components in the Cost Calculator Angular app from Days 4-8. A big part of making this app more modular and organized was breaking down the app into child and parent components.
Why would you do that?
Decoupling portions of the code means that changes only have to happen in one place. This also insulates an errors that might occur into a single component. For example, in my code above, if I had an issue with my Cost Total Detail module, the rest of the parent component could still load. If all of the code was contained in my component and a change caused an error, the whole thing would break and fail to display.
Ok, I’m sold. How would you do that?
In the code snippet above, we are injecting an object from the parent component (in this case, the Cost Total) into the child component (the Cost Total Detail). Cost Total Detail is considered a child component because it is expecting a Cost Detail from the parent. I used the Input modifier in the Cost Total Detail to configure the component to receive the object.
This happens in several places throughout the app. You can check the code here and see that Resource has a child called Resource Detail, and Cost Total Detail even has a child called Work Item. Together, the components work together to build the following.
What’s next?
Tomorrow I begin to update the data service to actually make calls to the GoSQL database. Check back tomorrow to hear all about it!
Jimmy D Anthology 