Skip to main content

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

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)

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

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

PropertyTypeDefaultDescription
hideReceiptsbooleanundefinedHide read receipts across all components
hideErrorbooleanundefinedHide error states across all components
hideUserStatusbooleanundefinedHide user online/offline status indicators
hideGroupTypebooleanundefinedHide group type badges (public/private/password)
showScrollbarbooleanundefinedShow scrollbar in list components
showSearchBarbooleanundefinedShow search bar in list components
disableSoundForMessagesbooleanundefinedDisable sound notifications for messages
textFormattersCometChatTextFormatter[]undefinedText formatters for message rendering
disableDefaultContextMenubooleanundefinedDisable right-click context menu across components
disableSoundForCallsbooleanundefinedDisable sound for incoming/outgoing calls
customSoundForCallsstringundefinedCustom sound URL for calls
customSoundForMessagesstringundefinedCustom sound URL for messages
hideAvatarbooleanundefinedHide avatar across components
callSettingsBuilderCallSettingsBuilderundefinedCustom CallSettingsBuilder for call components (call buttons, call logs, ongoing call)
All properties are optional. When a property is undefined (not set), the component falls back to its own internal default.

​
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

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: 
<!-- 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

ComponentBehavior
CometChatOngoingCallAccepts callSettingsBuilder as @Input. Passes it to OngoingCallService.
CometChatCallButtonsAccepts callSettingsBuilder as @Input. Forwards to CometChatOngoingCall.
CometChatMessageHeaderAccepts callSettingsBuilder as @Input. Forwards to CometChatCallButtons.
CometChatCallLogsAccepts 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:
ComponentProperties Read
CometChatConversationshideReceipts, hideError, hideUserStatus, hideGroupType, showScrollbar, showSearchBar, disableSoundForMessages, textFormatters, customSoundForMessages, hideAvatar, disableDefaultContextMenu
CometChatMessageHeaderhideUserStatus
CometChatMessageListhideReceipts, hideError, textFormatters, disableSoundForMessages, customSoundForMessages, disableDefaultContextMenu
CometChatMessageComposertextFormatters, disableSoundForMessages, customSoundForMessages
CometChatCallButtonsdisableSoundForCalls, customSoundForCalls, callSettingsBuilder
CometChatCallLogsshowScrollbar, callSettingsBuilder
CometChatUsershideUserStatus, showScrollbar, showSearchBar, hideAvatar, disableDefaultContextMenu
CometChatGroupshideGroupType, showScrollbar, showSearchBar, hideAvatar, disableDefaultContextMenu
CometChatGroupMembershideUserStatus, showScrollbar, showSearchBar, hideAvatar, disableDefaultContextMenu
CometChatOutgoingCalldisableSoundForCalls, customSoundForCalls
CometChatIncomingCalldisableSoundForCalls, customSoundForCalls

​
Full Example

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,
    },
  ],
};