When we start building apps with UI frameworks like Angular, the most frequent questions that we are faced with right at the beginning is: how do we structure our application? <\/p>\n\n\n\n
A very common concept is the splitting of Angular Components into Smart <\/strong>and Dumb<\/strong> Components ( also know sometimes as container<\/strong> components and Presentation<\/strong> Components).<\/em><\/p>\n\n\n\n Let’s find out the differences between these two types of components, and when should we use each and why!<\/p>\n\n\n\n In order to understand the difference between the two types of components, let’s start with a simple application, where the separation is not yet present.<\/p>\n\n\n\n We started building the Home screen of an application and we have added multiple features to a single template:<\/p>\n\n\n\n Although this Homepage component is still very simple, it’s already starting to have a significant size. For example, we have implemented a table containing a list of lessons.<\/p>\n\n\n\n But there will likely be other parts of the application where this functionality is also needed, for example let’s say that we have another screen which presents the table of contents of a given course.<\/p>\n\n\n\n In that screen we also want to display a list of lessons, but only the lessons that belong to that course. In that case, we would need something very similar to what we have implemented in the Home screen.<\/p>\n\n\n\n And we shouldn’t just copy-paste this across components, we should create a reusable component, right?<\/p>\n\n\n\n What we will want to do in this situation is to extract the table part of the screen into a separate component, let’s call it the Now let’s take a closer look at this component: it does not have the lessons service injected into it via its constructor. Instead, it receives the lessons in an input property via This means that the component itself does not know where the lessons come from:<\/p>\n\n\n\n We could reuse this component in all of these scenarios, because the lessons list component does not know where the data comes from. The responsibility of the component is purely to present the data to the user and not to fetch it from a particular location.<\/p>\n\n\n\n This is why we usually call to this type of component a Presentation <\/strong>or Dumb<\/strong> Component.<\/span><\/em><\/p>\n\n\n\n what happened to our Home Component? This is what it will look like after refactoring:<\/p>\n\n\n\n As we can see, we have replaced the list part of the Home screen with our new reusable lessons list component. The home component still knows how to retrieve the lessons list from a service, and what type of list this is (if these lessons are the lessons of a course, etc.).<\/p>\n\n\n\n But the Home component does not know how to present<\/em>\/display the lessons to the user.<\/p>\n\n\n\n This type of component is inherently tied to the application itself, so as we can see it receives in the constructor some dependencies that are application-specific, like the PS: <\/strong>It would be very hard to use this component in another application.<\/span><\/em><\/p>\n\n\n\n <\/p>\n\n\n\n Smart vs Presentation Components is more of a mindset to adopt where we ask ourselves:<\/p>\n\n\n\nSmart VS Dumb Component<\/h4>\n\n\n\n
Example<\/h4>\n\n\n\n
\/\/home.ts\n\n@Component({\n selector: 'app-home',\n template: `\n <h2>All Lessons<\/h2>\n <h4>Total Lessons: {{lessons?.length}}<\/h4>\n <div>\n <table class=\"table lessons-list card card-strong\">\n <tbody>\n <tr *ngFor=\"let lesson of lessons\" (click)=\"selectLesson(lesson)\">\n <td class=\"lesson-title\"> {{lesson.description}} <\/td>\n <td class=\"duration\">\n <i class=\"md-icon duration-icon\">access_time<\/i>\n <span>{{lesson.duration}}<\/span>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n`,\n styleUrls: ['.\/home.component.css']\n})\nexport class HomeComponent implements OnInit {\n\n lessons: Lesson[];\n\n constructor(private lessonsService: LessonsService) {\n }\n\n ngOnInit() {\n this.lessonsService.findAllLessons()\n .pipe(\n tap(console.log)\n )\n .subscribe(\n lessons => this.lessons = lessons\n );\n }\n\n selectLesson(lesson) {\n ...\n }\n\n}<\/code><\/pre>\n\n\n\nUnderstanding the Problem<\/span><\/h4>\n\n\n\n
Let’s create a Presentation Component<\/span><\/h4>\n\n\n\n
LessonsListComponent<\/code>:<\/p>\n\n\n\n\/\/lesson-list.ts\nimport {Component, OnInit, Input, EventEmitter, Output} from '@angular\/core';\nimport {Lesson} from \"..\/shared\/model\/lesson\";\n\n@Component({\n selector: 'lessons-list',\n template: `\n <table class=\"table lessons-list card card-strong\">\n <tbody>\n <tr *ngFor=\"let lesson of lessons\" (click)=\"selectLesson(lesson)\">\n <td class=\"lesson-title\"> {{lesson.description}} <\/td>\n <td class=\"duration\">\n <i class=\"md-icon duration-icon\">access_time<\/i>\n <span>{{lesson.duration}}<\/span>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table> \n `,\n styleUrls: ['.\/lessons-list.component.css']\n})\nexport class LessonsListComponent {\n\n @Input()\n lessons: Lesson[];\n\n @Output('lesson')\n lessonEmitter = new EventEmitter<Lesson>();\n\n selectLesson(lesson:Lesson) {\n this.lessonEmitter.emit(lesson);\n }\n\n}<\/code><\/pre>\n\n\n\n@Input<\/code>.<\/p>\n\n\n\nLet’s create a Smart Component<\/span><\/h4>\n\n\n\n
\/\/home.ts\n\nimport { Component, OnInit } from '@angular\/core';\nimport {LessonsService} from \"..\/shared\/model\/lessons.service\";\nimport {Lesson} from \"..\/shared\/model\/lesson\";\n\n@Component({\n selector: 'app-home',\n template: `\n <h2>All Lessons<\/h2>\n <h4>Total Lessons: {{lessons?.length}}<\/h4>\n <div>\n <lessons-list [lessons]=\"lessons\" (lesson)=\"selectLesson($event)\"><\/lessons-list>\n <\/div>\n`,\n styleUrls: ['.\/home.component.css']\n})\nexport class HomeComponent implements OnInit {\n\n lessons: Lesson[];\n\n constructor(private lessonsService: LessonsService) {\n }\n\n ngOnInit() {\n ...\n }\n\n selectLesson(lesson) {\n ...\n }\n\n}<\/code><\/pre>\n\n\n\nLessonsService<\/code>.<\/p>\n\n\n\nSummary<\/h4>\n\n\n\n