Practices - Do you know to separate your Angular components into container and presentational?

There are 2 general types of components according its complexity: presentational and smart components. Presentational component is a component that is purely driven by its input data. Smart component on the other hand, is more complex - it can have business logic, dependencies, and also store its own state. Aiming to have more presentational components makes building applications easier; it provides high reusability, and they are easier to debug since they have the same output for the same input.

Smart components are harder to debug since they now have dependencies and state that need to be taken into account when debugging.

// 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>&#123;&#123; company.name &#125;&#125;</td>
          <td>&#123;&#123; company.phone &#125;&#125;</td>
          <td>&#123;&#123; company.email &#125;&#125;</td>
          <td class="button-column">
            <button
              routerLink="/company/detail/&#123;&#123; company.id &#125;&#125;"
              class="btn btn-default"
            >
              Details
            </button>
            <button
              routerLink="/company/edit/&#123;&#123; company.id &#125;&#125;"
              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[];
  @Output() deleteCompanySelected = new EventEmitter<number>();

  confirmDelete(company: Company) {
    this.deleteCompanySelected.emit(company.id);
  }
}

✅ Figure: Figure: Good example - A presentational component with no injected dependencies