CngxAvatarGroup
projects/common/display/avatar-group/avatar-group.component.ts
Import#
import { CngxAvatarGroup } from '@cngx/common/display'
Description#
Stacked avatar group with an overflow pill. Project <cngx-avatar> children;
with [max] set, the group shows the first max and renders a +N pill for
the rest. The visible/hidden split is a computed() over the projected
avatars and max - the overflow count is derived, never tracked by hand
(Pillar 1) - and the group carries an aria-label summarising the total and
hidden counts so assistive tech hears "7 teammates, 4 not shown".
<cngx-avatar-group [max]="3" label="teammates">
<cngx-avatar initials="AK" />
<cngx-avatar initials="JD" />
<cngx-avatar initials="MR" />
<cngx-avatar initials="PL" />
<cngx-avatar initials="ST" />
</cngx-avatar-group>Metadata#
Host#
Index#
Inputs#
number | undefinedMaximum avatars to show before collapsing the rest into the pill. Unset = show all.
"xs" | "sm" | "md" | "lg" | "xl"Size preset for the overflow pill and stacking overlap (mirrors CngxAvatar).
'md'Instance Properties#
unknownFormat closure for the accessible summary. When set, it replaces the
built-in EN phrase ("{total} {label}, {hidden} not shown") entirely -
the i18n hook for consumers whose locale needs a different sentence
shape. hidden is 0 when nothing is collapsed.
input<((total: number, hidden: number) => string) | undefined>(undefined)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-label] | ariaLabel() |
[class.cngx-avatar-group--xs] | size() === "xs" |
[class.cngx-avatar-group--sm] | size() === "sm" |
[class.cngx-avatar-group--md] | size() === "md" |
[class.cngx-avatar-group--lg] | size() === "lg" |
[class.cngx-avatar-group--xl] | size() === "xl" |
[class.cngx-avatar-group--square] | shape() === "square" |