README.md

Table Component

Reusable table which allows to inject arbitrary caption, header, body and footer.

Table Of Content

• Usage
  • Browser's result
  • Angular template excerpt
  • Angular classes
  • Content Projection Resources

Usage

• Angular 12 does not allow to use select attribute of ng-content dynamically (1).
• Implementation based on PrimeNG Table component (MIT License).
  • PrimeNG Table component
  • github.com/primefaces/primeng
    • See table.ts from PrimeNG.
      • See app.component.html from this repo.
      • See app.component.ts from this repo.
    • See shared.ts from PrimeNG.
      • See injector.directive.ts from this repo.

Browser's result

Angular template excerpt

app.component.html

The styles of this table are in table.component.css. (2)

<app-table [data]="employeeList">

  <ng-template #TableCaption>Staff</ng-template>

  <ng-template #TableHeader>
    <th>Id</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
    <th>foo()</th>
  </ng-template>

  <ng-template #TableBody let-employee>
    <td>{{employee.id}}</td>
    <td>
      <a href="#">{{employee.name}}</a>
    </td>
    <td>{{employee.surname}}</td>
    <td>{{employee.age}}</td>
    <td>
      <button type="button" (click)="foo(employee)">{{employee.name}}</button>
    </td>
  </ng-template>

  <ng-template #TableFooter>
    <th>Id</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
    <th>foo()</th>
  </ng-template>

</app-table>

Angular classes

app.component.ts (excerpt)

···

employeeList = STAFF;

···

staff.stub.ts

import { Employee } from './employee.model';

export const STAFF: Array<Employee> = [
  new Employee(1, 'Mary', 'Smith', 35),
  new Employee(2, 'John', 'Doe', 53),
];

employee.model.ts

export class Employee {

  constructor(
    public readonly id:      number,
    public readonly name:    string,
    public readonly surname: string,
    public readonly age:     number,
  ) {}

}

Content Projection Resources

• ng-content select bound variable (2021-05-30)
• Support for Dynamic Content Projection #8563 (2021-05-30)
• How to style ng-content (2021-05-31)
• Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component API Design (2021-05-31)
• Angular Components, Templating, and Reusability (2021-06-26)