Thread Subscription

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: {
        enableThreadSubscription: true,
      } as GlobalConfig,
    },
  ],
};

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

@Component({
  selector: 'app-thread-panel',
  standalone: true,
  imports: [CometChatThreadHeaderComponent],
  template: `
    <cometchat-thread-header
      [parentMessage]="parentMessage"
      (threadSubscriptionChange)="onSubscriptionChange($event)"
      (closeClick)="closeThread()">
    </cometchat-thread-header>
  `,
})
export class ThreadPanelComponent {
  parentMessage!: CometChat.BaseMessage;

  /** Fires for every change to this thread, whoever caused it. */
  onSubscriptionChange(event: IThreadSubscriptionChange): void {
    console.log(event.parentMessageId, event.subscribed);
  }

  closeThread(): void {}
}

<cometchat-message-list
  [group]="group"
  [hideThreadSubscriptionOption]="false"
  (threadSubscriptionChange)="onSubscriptionChange($event)">
</cometchat-message-list>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CometChatThreadEvents } from '@cometchat/chat-uikit-angular';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-thread-inbox',
  standalone: true,
  template: `<!-- your own threads list -->`,
})
export class ThreadInboxComponent implements OnInit, OnDestroy {
  private subscription?: Subscription;

  ngOnInit(): void {
    this.subscription = CometChatThreadEvents.ccThreadSubscriptionChanged.subscribe(
      ({ parentMessageId, subscribed }) => {
        if (subscribed) {
          this.addRow(parentMessageId);
        } else {
          // Unfollowing hard-deletes the row server-side — remove it,
          // do not re-render it in an "unfollowed" style.
          this.removeRow(parentMessageId);
        }
      }
    );
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }

  private addRow(id: number): void {}
  private removeRow(id: number): void {}
}

import { Component, Input, inject } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { ThreadSubscriptionService } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-thread-row',
  standalone: true,
  template: `
    <button (click)="toggle()">
      {{ isFollowing ? 'Unfollow' : 'Follow' }}
    </button>
  `,
})
export class CustomThreadRowComponent {
  private readonly threads = inject(ThreadSubscriptionService);

  /** Both methods take the message, not an id — a reply resolves to its parent thread. */
  @Input() message!: CometChat.BaseMessage;

  get isFollowing(): boolean {
    return this.threads.isFollowing(this.message);
  }

  toggle(): void {
    this.threads.toggle(this.message);
  }
}