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

# Global Configuration

> Centralized configuration for CometChat Angular UIKit components using the COMETCHAT_GLOBAL_CONFIG injection token

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Purpose | App-wide kit defaults through one injection token, instead of repeating the same input on every component instance. |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Key symbols | `COMETCHAT_GLOBAL_CONFIG` |
  | Common trap | Not knowing it is there — a component appearing to ignore a default (call buttons hidden, say) is usually global config, not the component. |
  | On this page | [Setup](#setup) · [Configuration Properties](#configuration-properties) · [Components That Read GlobalConfig](#components-that-read-globalconfig) |
  | Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

## Overview

The CometChat Angular UIKit provides a centralized configuration system through the `COMETCHAT_GLOBAL_CONFIG` injection token. This allows you to set default values for common properties across all UIKit components from a single location, without having to pass the same inputs to every component instance.

### Priority System

All configurable properties follow a three-tier priority system:

1. `@Input` value (if explicitly set on the component)
2. `GlobalConfig` value (from the injection token)
3. Component's internal default value

This means you can set a global default and still override it on individual component instances when needed.

## Setup

### Standalone Application (app.config.ts)

```typescript expandable theme={null}
import { ApplicationConfig } from '@angular/core';
import { COMETCHAT_GLOBAL_CONFIG, GlobalConfig } from '@cometchat/chat-uikit-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMETCHAT_GLOBAL_CONFIG,
      useValue: {
        hideReceipts: true,
        hideUserStatus: false,
        showSearchBar: true,
        disableSoundForMessages: false,
      } as GlobalConfig,
    },
  ],
};
```

### NgModule Application (app.module.ts)

```typescript expandable theme={null}
import { NgModule } from '@angular/core';
import { COMETCHAT_GLOBAL_CONFIG, GlobalConfig } from '@cometchat/chat-uikit-angular';

@NgModule({
  providers: [
    {
      provide: COMETCHAT_GLOBAL_CONFIG,
      useValue: {
        hideReceipts: true,
        showSearchBar: true,
      } as GlobalConfig,
    },
  ],
})
export class AppModule {}
```

### Dynamic Configuration with Factory

```typescript expandable theme={null}
import { COMETCHAT_GLOBAL_CONFIG } from '@cometchat/chat-uikit-angular';

{
  provide: COMETCHAT_GLOBAL_CONFIG,
  useFactory: (envService: EnvironmentService) => ({
    hideReceipts: envService.isProduction,
    disableSoundForMessages: envService.isMobile,
    showSearchBar: true,
  }),
  deps: [EnvironmentService],
}
```

## Configuration Properties

| Property | Type | Default | Description |
| - | - | - | - |
| `hideReceipts` | `boolean` | `undefined` | Hide read receipts across all components |
| `hideError` | `boolean` | `undefined` | Hide error states across all components |
| `hideUserStatus` | `boolean` | `undefined` | Hide user online/offline status indicators |
| `hideGroupType` | `boolean` | `undefined` | Hide group type badges (public/private/password) |
| `showScrollbar` | `boolean` | `undefined` | Show scrollbar in list components |
| `showSearchBar` | `boolean` | `undefined` | Show search bar in list components |
| `disableSoundForMessages` | `boolean` | `undefined` | Disable sound notifications for messages |
| `textFormatters` | `CometChatTextFormatter[]` | `undefined` | Text formatters for message rendering |
| `disableDefaultContextMenu` | `boolean` | `undefined` | Disable right-click context menu across components |
| `disableSoundForCalls` | `boolean` | `undefined` | Disable sound for incoming/outgoing calls |
| `customSoundForCalls` | `string` | `undefined` | Custom sound URL for calls |
| `customSoundForMessages` | `string` | `undefined` | Custom sound URL for messages |
| `hideAvatar` | `boolean` | `undefined` | Hide avatar across components |
| `enableThreadSubscription` | `boolean` | `undefined` (off) | Enable the thread follow/unfollow surfaces — the control in the thread header and the follow option in the message action sheet |
| `enablePinMessage` | `boolean` | `undefined` | Force the Pin Message surfaces on or off, overriding the app-level flag the Chat SDK reports |
| `enableSaveMessage` | `boolean` | `undefined` | Force the Save Message surfaces on or off, overriding the app-level flag the Chat SDK reports |
| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` for call components (call buttons, call logs, ongoing call) |

<Note>
  All properties are optional. When a property is `undefined` (not set), the component falls back to its own internal default.
</Note>

## Feature Gates

Three properties gate whole features rather than tune a component's appearance. They behave differently from the rest of the table, so they are worth calling out.

### enableThreadSubscription

Defaults to **off**. The backend exposes no capability flag a client could feature-detect from, so whether the threads endpoints are deployed is something only you know. When off, neither the thread header control nor the action-sheet option renders and no thread request is made — whatever the per-component `hideThreadSubscription*` inputs say.

```typescript expandable theme={null}
{
  provide: COMETCHAT_GLOBAL_CONFIG,
  useValue: {
    enableThreadSubscription: true,
  } as GlobalConfig,
}
```

See the [Thread Subscription guide](/ui-kit/angular/guides/thread-subscription).

### enablePinMessage and enableSaveMessage

These **override** the `features.ux.messages.pinned.enabled` and `features.ux.messages.saved.enabled` app settings, which the Chat SDK reports through `CometChat.isPinMessageEnabled()` and `CometChat.isSaveMessageEnabled()`. An explicit value wins; leaving a property unset falls back to the SDK's answer.

```typescript expandable theme={null}
{
  provide: COMETCHAT_GLOBAL_CONFIG,
  useValue: {
    enablePinMessage: true,
    enableSaveMessage: true,
  } as GlobalConfig,
}
```

<Warning>
  Leave both unset in production. The app's own settings are the right source of truth. These exist because the flags are provisioned server-side — so before they are switched on for an app, "flag off" is indistinguishable from "not built" and there is no way to develop or demo against the feature.
</Warning>

See the [Pin and Save guide](/ui-kit/angular/guides/pin-and-save-messages).

## Call Settings Customization

The `callSettingsBuilder` property lets you provide a custom `CometChatCalls.CallSettingsBuilder` that is used across all call-related components. This is useful for configuring call UI features like layout, recording, analytics, or audio-only mode globally.

### Global Call Settings

```typescript expandable theme={null}
import { CometChatCalls } from '@cometchat/calls-sdk-javascript';
import { COMETCHAT_GLOBAL_CONFIG } from '@cometchat/chat-uikit-angular';

const customCallSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false);

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMETCHAT_GLOBAL_CONFIG,
      useValue: {
        callSettingsBuilder: customCallSettings,
      },
    },
  ],
};
```

### Per-Component Override

Even with a global `callSettingsBuilder`, you can override it on individual component instances:

```html expandable theme={null}
<!-- This component uses the per-instance builder, ignoring GlobalConfig -->
<cometchat-call-buttons
  [user]="activeUser"
  [callSettingsBuilder]="myCustomBuilder">
</cometchat-call-buttons>

<!-- This component falls back to GlobalConfig.callSettingsBuilder -->
<cometchat-call-logs
  (itemClick)="onCallLogClick($event)">
</cometchat-call-logs>
```

### Components That Support callSettingsBuilder

| Component | Behavior |
| - | - |
| [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) | Accepts `callSettingsBuilder` as `@Input`. Passes it to `OngoingCallService`. |
| [CometChatCallButtons](/ui-kit/angular/components/cometchat-call-buttons) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatOngoingCall`. |
| [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatCallButtons`. |
| [CometChatCallLogs](/ui-kit/angular/components/cometchat-call-logs) | Accepts `callSettingsBuilder` as `@Input`. Uses it in the ongoing call overlay. |

## Components That Read GlobalConfig

The following components read from `COMETCHAT_GLOBAL_CONFIG` and apply the three-tier priority system:

| Component | Properties Read |
| - | - |
| CometChatConversations | `hideReceipts`, `hideError`, `hideUserStatus`, `hideGroupType`, `showScrollbar`, `showSearchBar`, `disableSoundForMessages`, `textFormatters`, `customSoundForMessages`, `hideAvatar`, `disableDefaultContextMenu` |
| CometChatMessageHeader | `hideUserStatus` |
| CometChatMessageList | `hideReceipts`, `hideError`, `textFormatters`, `disableSoundForMessages`, `customSoundForMessages`, `disableDefaultContextMenu`, `enableThreadSubscription`, `enablePinMessage`, `enableSaveMessage` |
| CometChatThreadHeader | `enableThreadSubscription` |
| CometChatMessageComposer | `textFormatters`, `disableSoundForMessages`, `customSoundForMessages` |
| CometChatCallButtons | `disableSoundForCalls`, `customSoundForCalls`, `callSettingsBuilder` |
| CometChatCallLogs | `showScrollbar`, `callSettingsBuilder` |
| CometChatUsers | `hideUserStatus`, `showScrollbar`, `showSearchBar`, `hideAvatar`, `disableDefaultContextMenu` |
| CometChatGroups | `hideGroupType`, `showScrollbar`, `showSearchBar`, `hideAvatar`, `disableDefaultContextMenu` |
| CometChatGroupMembers | `hideUserStatus`, `showScrollbar`, `showSearchBar`, `hideAvatar`, `disableDefaultContextMenu` |
| CometChatOutgoingCall | `disableSoundForCalls`, `customSoundForCalls` |
| CometChatIncomingCall | `disableSoundForCalls`, `customSoundForCalls` |

## Full Example

```typescript expandable theme={null}
import { ApplicationConfig } from '@angular/core';
import { CometChatCalls } from '@cometchat/calls-sdk-javascript';
import { COMETCHAT_GLOBAL_CONFIG, GlobalConfig } from '@cometchat/chat-uikit-angular';

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false);

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMETCHAT_GLOBAL_CONFIG,
      useValue: {
        // Display
        hideReceipts: false,
        hideUserStatus: false,
        hideGroupType: false,
        hideAvatar: false,
        showScrollbar: false,
        showSearchBar: true,

        // Sound
        disableSoundForMessages: false,
        disableSoundForCalls: false,

        // Calls
        hideVoiceCallButton: false,
        hideVideoCallButton: false,
        callSettingsBuilder: callSettings,

        // Context menu
        disableDefaultContextMenu: false,
      } as GlobalConfig,
    },
  ],
};
```

## Related

* [Theming](/ui-kit/angular/customization/theming) — Customize the visual appearance with CSS variables
* [Localization](/ui-kit/angular/customization/localization) — Configure language and translations
* [ChatStateService](/ui-kit/angular/api-reference/chat-state-service) — Centralized chat state management


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