I came across the pattern of separating your components into Presentational and Container Components (also known as Smart and Dumb components) while playing around with React/React Native a couple of years ago. I have not seen the same level of adoption in the Angular world for this pattern, so I thought I’ll explore it a little bit here. Let’s start with a little background:

Presentational Components

• are purely user interface and concerned with how things look.
• are not aware about the business logic, or services.
• receive data via @Inputs, and emit events via @Output.

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.

Creating the Components

To create a simple example, I am going to use the final code from the Tour of Heroes tutorial as my starting point. I’ll focus on ‘HeroDetailComponent’ for this post. The initial template and the corresponding component typescript code is below: