When working with the Angular project, we are often faced with the challenge of how to create the best structure for components and services. We focus on making sure that our application is divided into modules, and components into smaller components, and that all communication is done with the help of services. In contrast, we have a way to structure our components even better. This is the idea of Smart and Dumb Components.
The components we create should be divided into those that contain presentation logic and those that simply accept data and propagate user events higher up. A dumb component cannot exist without a parent component. Dumb components focus on styling, it allows the smart component to focus on functionality. Their communication should only take place with the help of the @Input and @Output decorators. As in the diagram below.
We can call a component Smart, when it stores data, manipulates data, contains dependencies (i.e. services) or when decides how to modify the data based on user interaction and other conditionals.
We can see the following in the above code:
It's simple. It's a component whose job is merely to display data and emit user interaction to the component above. It does not manipulate data, it does not link to any services. They should not contain other components
.png)
As we can see, the component only contains properties that receive data or send events:
Dumb components are easy to modify and easy to style, we can reuse them wherever we want and they are very readable. They should be used wherever you can. When we focus on styling the dumb components, we can focus on the logic of functionality in the smart components. This leaves our code cleaner and more acceptable to other developers.
Hubert Wróblewski
Better structure your project using the concept of smart and dumb components.
Better structure your project using the concept of smart and dumb components.Hubert Wroblewski
Read more
>
Standalone components in Angular. Should I use them?
Wojtek Jakubek
Read more
>
Follow us on:
