Custom Column Header

Usages Custom Column Header

We can use angular ng-template or custom HeaderComponent to customize column header.

Id	Name Normal Upper Lower	Select Field To Display
1	ABAGAIL KINGSCOTE	[email protected]
2	NICOLINA COIT	[email protected]
3	SARENE GREIM	[email protected]
4	BLAIR MILLBANK
5	KLIMENT SPROWLE	[email protected]

Below is the example of custom header component implementing HeaderComponent.

header-text-case.component.ts

header-text-case.component.html

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HeaderComponent, PropertyColumn } from 'ngx-panemu-table';

type TextCase = 'normal' | 'upper' | 'lower'

@Component({
  templateUrl: 'header-text-case.component.html',
  imports: [CommonModule, ReactiveFormsModule],
  standalone: true
})
export class HeaderTextCaseComponent implements OnInit, HeaderComponent {
  column!: PropertyColumn<any>;
  rdbCase = new FormControl('upper' as TextCase)
  constructor() { }
  parameter?: any;

  ngOnInit() {
    this.rdbCase.valueChanges.subscribe({
      next: val => this.changeCase(val)
    })
    this.changeCase(this.rdbCase.value)
  }

  changeCase(textCase: TextCase | null) {
    if (!textCase) return;

    if (textCase == 'upper') {
      this.column.formatter = (val: string) => val?.toUpperCase()
    } else if (textCase == 'lower') {
      this.column.formatter = (val: string) => val?.toLowerCase()
    } else if (textCase == 'normal') {
      this.column.formatter = (val: string) => val
    }

  }
}