Smart versus dumb components

The ClientCard component in our previous example is what we usually call a dumb component. Such components are also known as presentational components or pure components.

The difference between smart components and dumb, presentational, or pure ones is that the latter don't fetch data themselves and, generally, don't include too much logic. For example, in our case, the ClientCard component receives a list of clients to display; it doesn't know where the data came from. Also, when a deletion is requested, this component only emits an event (that is, a signal). It doesn't have to decide what to do next.

Of course, you'll need some smarter components to make the link between your view layer and the rest of your application. That being said, generally speaking, you should try to have as many dumb components as you can in order to maximize reusability.

Speaking of reusability, you could also create Angular libraries for your shared components. This is explained here: https://angular.io/guide/creating-libraries. You can also take advantage of solutions such as nrwl nx (https://github.com/nrwl/nx), which we'll discuss in the What's Next? chapter.

The following article further discusses the dichotomy between smart and dumb components: https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why.