CngxSortHeader

Molecule directive for sort-header elements.

Apply to any clickable header element. Consumer provides an explicit [cngxSortRef] binding - no ancestor injection, no hidden wiring.

In multi-sort mode, Shift+click adds this column to the sort stack. The priority() signal returns the 1-based position in the stack (0 when not active), useful for showing sort-order badges.

<div cngxSort [multiSort]="true" #sort="cngxSort">
  <button cngxSortHeader="name" [cngxSortRef]="sort" #h="cngxSortHeader">
    Name
    @if (h.isActive()) {
      {{ h.isAsc() ? '↑' : '↓' }}
      @if (sort.multiSort()) { <span>{{ h.priority() }}</span> }
    }
  </button>
</div>

https://cngxjs.github.io/cngx/examples/#/common/data/sort/basic https://cngxjs.github.io/cngx/examples/#/common/data/sort/multi-sort https://cngxjs.github.io/cngx/examples/#/common/data/sort/controlled https://cngxjs.github.io/cngx/examples/#/common/data/sort/aria-and-keyboard