Header Title And Translation

Header Title And Translation

A lot of the times property names can also be used as labels or, you would like to use pipe-based translations (e.g ngx-translate).

Here is an example for an angular pipe which transforms a string into a title.
For example, it will convert name to Name.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'headerToTitle'})
export class HeaderToTitlePipe implements PipeTransform {
  transform(value: string): string {
    return value[0].toUpperCase() + value.slice(1);
  }
}

Now, all we need to do to use it is to define a new default, catch-all, header template:

<div *pblNgridHeaderCellDef="'*'; col as col;">{{col.label | headerToTitle}}</div>

The same approach can be used to translation.

The label property ( col.label above) is part of the column definition.
When not set, it is automatically populated with the value set in the prop property, which is mandatory.
Header Title And Translation
Name
Gender
Birthdate

Shlomi Assaf © 2020. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.

Version 5.0.0 using angular 14.2.4 and cdk 14.2.3 (hash: 25f523f)