Clean Code Using Container and Presentational Components in Angular

Data is a critical part of any web application, and there are often scenarios where the same data needs to be presented in different UI formats. The container/presentational component pattern in Angular separates components based on their responsibilities, making it easier to reuse the same data or application state across different UI presentations.

Definition of Container and Presentational Components

A container component mainly contains business logic and communication with the outside of the application, such as an API call. These components are also called stateful, logic, feature or smart components.

A presentational component is primarily responsible for presenting the UI and rendering the data it receives. It doesn’t handle any business logic or make API calls. It communicates only with its parent container component, which manages the data and logic. These components are also called stateless, UI or dumb components.

As you see from the diagram, a container/smart component is responsible for handling business logic and managing data. It connects to services, APIs or state management; handles user interactions; and passes data to its child components. It typically manages complex state and side effects.

A presentational (child) component focuses solely on UI and presentation. It receives data via inputs, emits events via models and remains unaware of any services or business logic. It is highly reusable and easy to test, making it ideal for building clean, modular UIs.

Read full article here –

https://www.telerik.com/blogs/clean-code-using-container-presentational-components-angular

Thanks for reading.