> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Item

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

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatGroupItemComponent` |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Import | `import { CometChatGroupItemComponent } from "@cometchat/chat-uikit-angular";` |
  | Selector | `<cometchat-group-item>` — the class name is NOT a valid tag |
  | CSS root class | `.cometchat-group-item` |
  | Standalone | Add `CometChatGroupItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
  | Primary output | `(itemClick)` |
  | Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
  | Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
  | Full props | See [Properties](#properties) |
  | Events | See [Events](#events) |
  | Customization | See [Customization](#customization) |
  | Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

## 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)

<Info>
  **Live Preview** — default group item preview.
  [Open in Storybook ↗](https://storybook.cometchat.io/angular/?path=/story/components-groups-cometchat-group-item--default)
</Info>

<iframe src="https://storybook.cometchat.io/angular/iframe.html?id=components-groups-cometchat-group-item--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "100px", border: "1px solid #e0e0e0"}} title="CometChat Group Item — Default" allow="clipboard-write" />

## Basic Usage

```typescript expandable theme={null}
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:

```css theme={null}
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:

```html expandable theme={null}
<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](./cometchat-groups.mdx) — Parent list component that renders multiple group items
* [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the group avatar
* [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.