Clutch

Container and Presentational Components in Angular

Container and Presentational Components in Angular
Average rating: 0
(0 votes)

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.

Container Components

  • 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.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111