Home
Do you know to separate your Angular components into container and presentational components?
  v2.0 Posted at 4/01/2017 3:58 AM by Tiago Araujo

​​​There are two types of components 'dumb' and 'smart' components. Dumb components normally have no dependencies and no logic and just have @Inputs() and @Outputs(). Smart components are their parent components that would have multiple dependencies and logic but not necessarily an HTML template.​

​​Aiming to keep the components that display data 'dumb' makes them much easy to reuse in your application and less buggy, but many people do not like the terms smart and dumb components as a dumb component may just have less logic versus none. Many people and SSW included are preferring the terms container and presentational components for these reasons.​​​

company-list-table.component.ts
@Component({
    selector: 'fbc-company-list-table',
    template: `
     <table id="company-list-table" class="table table-hover table-striped company-list-table-component">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
               <tr class="item" *ngFor="let company of companies">
                    <td>{{company.name}}</td>
                    <td>{{company.phone}}</td>
                    <td>{{company.email}}</td>
                    <td class="button-column">
                        <button routerLink="/company/detail/{{company.id}}" class="btn btn-default" >Details</button>
                        <button routerLink="/company/edit/{{company.id}}" class="btn btn-default" >Edit</button>
                        <button (click)="confirmDelete(company)" class="btn btn-default">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    `
})
export class CompanyListTableComponent {
    @Input() companies: Company[] = [<Company>{}];
    @Output() deleteCompanySelected = new EventEmitter<number>();
            this.deleteCompanySelected.emit(company.id);
    }
}

​Figure: Good example of a presenta​​tional component with no injected dependencies​

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.