Group Item

A standalone Angular component for rendering a single group item with avatar, group type indicator, member count, and context menu support

Overview

The CometChatGroupItem component renders a single group entry within a list. It displays the group’s icon/avatar, name, type indicator (public, private, password-protected), and member count. The component supports custom templates for all visual sections, integrates a context menu for group-specific actions, and provides full keyboard accessibility with ARIA support.

Key Features

• State Management: Active, selected, and focused states with distinct visual styling
• Group Avatar: Displays the group icon with a group type indicator badge
• Member Count: Shows the localized member count below the group name
• Custom Templates: Template projection for leading, title, subtitle, and trailing sections
• Context Menu: Configurable context menu options that appear on hover or focus
• Keyboard Accessibility: Full keyboard support with Enter, Space, and Shift+F10 shortcuts
• Global Config Priority: Supports a three-tier priority system (Input > GlobalConfig > Default)

Live Preview — default group item preview. Open in Storybook ↗

Basic Usage

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatGroupItemComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-group-item-demo',
  standalone: true,
  imports: [CometChatGroupItemComponent],
  template: `
    <cometchat-group-item
      [group]="group"
      [isActive]="false"
      (itemClick)="onItemClick($event)"
    ></cometchat-group-item>
  `
})
export class GroupItemDemoComponent {
  group!: CometChat.Group;

  onItemClick(group: CometChat.Group): void {
    console.log('Group clicked:', group.getName());
  }
}

Properties

Property	Type	Default	Description
group	CometChat.Group	required	The group object to render. Primary data source for the component.
isActive	boolean	false	Whether this group item is currently active/selected for viewing. Applies active styling.
isSelected	boolean	false	Whether this group item is selected in selection mode. Shows selection indicator.
isFocused	boolean	false	Whether this group item currently has keyboard focus. Applies focus styling.
tabIndex	number	-1	The tabindex for roving tabindex pattern. Only the focused item should have 0.
hideGroupType	boolean	false	Whether to hide the group type indicator (public, private, password). Supports global config override.
disableDefaultContextMenu	boolean	true	When true, prevents the browser’s native context menu. Custom CometChat menu visibility depends on the component’s context-menu options and interaction state.
contextMenuOptions	CometChatOption[]	undefined	Options for the context menu displayed on hover/focus.
leadingView	TemplateRef<{ $implicit: CometChat.Group }>	undefined	Custom template for the leading section (icon/avatar area).
titleView	TemplateRef<{ $implicit: CometChat.Group }>	undefined	Custom template for the title section.
subtitleView	TemplateRef<{ $implicit: CometChat.Group }>	undefined	Custom template for the subtitle section.
trailingView	TemplateRef<{ $implicit: CometChat.Group }>	undefined	Custom template for the trailing section.

Events

Event	Payload Type	Description
itemClick	CometChat.Group	Emitted when the group item is clicked or activated via keyboard.
itemSelect	{ group: CometChat.Group; selected: boolean }	Emitted when the group is selected/deselected in selection mode.
contextMenuOpen	CometChat.Group	Emitted for keyboard shortcuts (Shift+F10 / ContextMenu) to request the context menu. Menu option visibility itself is driven by hover/focus state.
contextMenuOptionClick	{ option: CometChatOption; group: CometChat.Group }	Emitted when a context menu option is clicked.
itemFocus	void	Emitted when the item’s inner container receives native focus. Used by the parent list for roving tabindex management.

Customization

CSS Variable Overrides

The component uses CometChat CSS variables for theming. Override them on the host element or a parent wrapper:

cometchat-group-item {
  --cometchat-background-color-01: #ffffff;
  --cometchat-background-color-03: #e8e8e8;
  --cometchat-text-color-primary: #141414;
  --cometchat-text-color-secondary: #727272;
  --cometchat-primary-color: #6852D6;
  --cometchat-border-color-light: #e8e8e8;
}

Custom Templates

Provide custom templates via inputs to override any visual section:

<cometchat-group-item
  [group]="group"
  [subtitleView]="customSubtitle"
  [trailingView]="customTrailing"
>
  <ng-template #customSubtitle let-group>
    <span class="member-count">
      {{ group.getMembersCount() }} members
    </span>
  </ng-template>

  <ng-template #customTrailing let-group>
    <button (click)="joinGroup(group); $event.stopPropagation()">
      Join
    </button>
  </ng-template>
</cometchat-group-item>

Accessibility

Keyboard Navigation

Key	Action
Enter	Activate the group item (emits itemClick)
Space	Activate the group item (emits itemClick)
Shift + F10	Emit contextMenuOpen to request the context menu (options appear on hover/focus)
ContextMenu	Emit contextMenuOpen to request the context menu (options appear on hover/focus)

ARIA Attributes

• role="option" on the item container
• aria-selected reflects the current selection state
• aria-label combines the group name, type, and member count for screen readers
• Proper tabindex management via roving tabindex pattern

Focus Management

• Visible focus indicator meeting WCAG contrast requirements
• Mouse clicks prevent focus outline (focus ring only appears for keyboard navigation)
• Roving tabindex pattern for efficient list navigation
• itemFocus output enables parent list to track focus position

Related Components

• CometChatGroups — Parent list component that renders multiple group items
• CometChatAvatar — Used internally for the group avatar
• CometChatContextMenu — Used internally for the context menu