Lars Gyrup Brink Nielsen
Nov 4 · 2 min read

Thank you for your feedback and questions, Andrei

A container component with multiple presentational components

In this example, I’ve drafted a flow diagram of how the commponents for a data table could be designed.

A table component with Model-View-Presenter

We have multiple row components that is each able to emit one or more events from its output properties.

In my draft, there is a single presentational table component. If the TableComponent´s template doesn’t contain much more than an *ngFor loop of RowComponents and no business logic other than forwarding events to its own output properties, there would not necessarily be a need for splitting it into aTableContainerComponent and a presentational TableComponent.

So imagine the same flow diagram but with only one parent table component. This component would have one or more event handlers bound to the output properties of the row components.

This table container component would also bind data to the row component input properties.

A container component with container component children

This scenario would be pretty rare. If we have a component that simply renders other components without any bindings, it is a presentational component.

If we have a component with event bindings on child components, then the child components are not container components.

I’m trying to think of a use case here. Let’s say we have a bunch of child container components but we only want to display one or some of them depending on some user choice, configuration option or server state.

We would take the filtering conditions from the application state and map them to a filtered collection of container components. This is a job for a container component. Its presentational child component would only be interested in a collection of components to render, not how we assembled that collection.

If the mapping logic is complicated or complex, we should extract it into a component-level service provided and used by the container component.

I’m struggling to come up with use other cases for this scenario. Do you have something in mind?

    Lars Gyrup Brink Nielsen

    Written by

    Left Medium. Follow me on INDEPTH: https://indepth.dev/author/layzee/. Comments will not be read, articles will not be updated.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade