Stacked avatar group with an overflow pill
CngxAvatarGroup
ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA
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#
max#
number | undefinedinput()
Maximum avatars to show before collapsing the rest into the pill. Unset = show all.
size#
"xs" | "sm" | "md" | "lg" | "xl"input()
Size preset for the overflow pill and stacking overlap (mirrors CngxAvatar).
default
'md'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" |