We often write about Angular, and this time is not an exception. We want to present you Container and Presentational Components in Angular that you can explore to make your life easier.
This is currently a mixed component, since we are dealing with services like the HeroService, as well as defining the look and feel of the Hero Detail Component. We can split it up into 2 components, a Container component that contains all the business logic, and a Presentational Component that will live inside the Container component, and define the UI.
Container component templates have no logic in them to test. Therefore, we can bypass the whole Angular TestBed setup. Since Angular compiles components for every test case, we are skipping compilation, DI and component lifecycles. This results in simpler and faster unit tests.
- contain all the business logic,
- pass the data to the Presentational Components, and handle @Output events raised by them,
- have no UI logic,
- do have dependencies on other parts of your app, like services, or your state store.
If you are interested in more examples, check here. And read about Dynamic Components with Content Projection in Angular.