Apr 22, 20223 min read

Smart & Dumb Components in Angular

Components may appear to be easy to grasp! Yet there is much more to learn about them. The Components structure divides the page into pieces and allows you to manage your page in a highly flexible manner by encapsulating all styles, markups, and business logic into each component, which you then compose to build your app.

There are two sorts of components, or rather notions:

Smart Components
Dumb Components

Dumb Components

In software world, this is also known as a Dumb Component. A Component that performs nothing on its own and is completely reliant on Smarter Components.

Dumb Components just exist to present something in the DOM. As a result, they are sometimes known as “Presentational Components” or “Isolated Components.”

import{ Component, Input, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-book-list’,
templateUrl: ‘./book-list.component.html’,
styleUrls: [‘./book-list.component.css’]
})
export class BookListComponent implements OnInit {
@Input(‘book’) book: any[];
constructor() { }
ngOnInit() {
}
}

The HTML file:

<div class="books-list-container">
<h3>{{book.volumeInfo.title}}</h3>
<p>{{book.volumeInfo.authors[0]}}</p>
<p>{{book.description}}</p>
</div>

The code snippet above is from the book-list.component.ts file.

This component has only an Input decorator. The Input decorator receives a list of books as a parameter. It is entirely isolated and does nothing but take information from the outside world and display it to the user. This is known as a Dumb Component.

Characteristics of dumb components:

Focus on the UI Almost all basic UI components should be considered dumb components. Examples include loaders, modals, buttons, inputs, etc.
Accept props Dumb components accept props to allow them to be dynamic and reusable. For example, you might send the title of a button in props from the parent component to allow it to have a unique name.
Require no app dependencies Other than UI packages, like Reactstrap, dumb components do not require dependencies.
Rarely include state The only instance where a dumb component has state is for manipulating the UI itself, not application data. Some examples of where a dumb component might have state would be button groups, tabs, switches and other UI elements that do not impact the data, only the UI.

Smarter Components

Smart components, would be those who understand how to manage data, how to retrieve data from services, how to interface with services, maintain track of the state, and are concerned with how the app operates as a whole. They are also called containers because they use property bindings to transfer data to Dumb Components.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private API_KEY:string = 'API_KEY';
book: Observable<any[]>;
constructor(private _http: HttpClient) { }
ngOnInit() {
const URL = 'https://www.googleapis.com/books/v1';
//Fetch All Books from API
//@Params = URL: String
this.fetchBooks(URL);
}
fetchBooks(URL: string){
this.book = this._http.get<any>(`${URL}/q=&key=${this.API_KEY}`,             {headers}).pipe(
   map(resp=>{
    return resp.items;
   });
 );
}}

The code above is from the books component. As you’ve seen, it includes the Observable array, which is in charge of storing the data response from the API call. We injected HttpClient and utilized it to obtain a request to the GoogleBooks URL to make an API call. The return value is saved in the Books observable and passed to the Books-list component (Dumb Component).

<app-book-list [book]="book | async"></app-book-list>

After supplying the book Observable to the book-list component, the book information will be presented on the screen.

Characteristics of smart components include:

Manipulates Data Smart components can fetch, capture changes and pass down application data.
Call Redux, Lifecycle methods, APIs, Libraries, etc These components are called smart for a reason! They are responsible for calling libraries and functionality.
Manage state Smart components are responsible for managing state and knowing when to re-render a component.
Rarely includes styling Since dumb components focus on styling, it allows the smart component to focus on functionality without the clutter of styles too.