ccs-chat-notifications-client for Angular

The /angular entry point of ccs-chat-notifications-client wraps ChatNotificationsClient for Angular. The connection state is a Signal and each event is an Observable. It needs Angular 17 or later and RxJS 7.

Install

Install the package as described on the package page. @angular/core, @angular/common and rxjs are optional peer dependencies, so your Angular app already provides them. Import from the sub-path:

import { createChatNotifications } from '@central-code-station/ccs-chat-notifications-client/angular';

Create the wrapper

createChatNotifications(options, destroyRef?) takes the same options as ChatNotificationsClient. Pass inject(DestroyRef) from an injection context and it disconnects when that context is destroyed. Without a DestroyRef, call disconnect() yourself, for example from ngOnDestroy.

It is a plain factory function, so wrap it in your own @Injectable() service.

import { DestroyRef, inject, Injectable } from '@angular/core';
import { createChatNotifications } from '@central-code-station/ccs-chat-notifications-client/angular';
import { getChatAccessToken } from './fe-guide-chat-token';

@Injectable({ providedIn: 'root' })
export class ChatLiveUpdates {
  private readonly notifications = createChatNotifications(
    {
      chatApiUrl: 'https://chat.centralcodestation.com/api/v1',
      tenantId: 'fitness',
      applicationId: 'fitness-app',
      getAccessToken: getChatAccessToken,
    },
    inject(DestroyRef), // disconnects when this service's injector is destroyed
  );

  readonly connectionState = this.notifications.connectionState; // Signal<ConnectionState>
  readonly messageCreated$ = this.notifications.on$('message.created');
  readonly typing$ = this.notifications.on$('typing');

  connect(): void {
    this.notifications.connect();
  }

  viewPublicChannel(conversationId: string): void {
    this.notifications.subscribeToConversation(conversationId);
  }
}

Member	Description
`connectionState`	A `Signal<ConnectionState>`: `'disconnected'`, `'connecting'`, `'connected'` or `'error'`.
`connect()`, `disconnect()`	Start and stop the stream.
`subscribeToConversation(id)`, `unsubscribeFromConversation(id)`	Watch one PUBLIC channel you are not a member of.
`on$(event)`	An Observable of one event type, such as `on$('message.created')`.

on$ emits the event payloads described on the package page. Unsubscribing from it removes the handler. It does not complete.

Consume it

Read the Signal in a template and subscribe to an event stream with takeUntilDestroyed.

import { Component, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ChatLiveUpdates } from './fe-guide-angular-live';

@Component({
  selector: 'app-live-status',
  standalone: true,
  template: `@if (live.connectionState() === 'error') { <p>Live updates are paused.</p> }`,
})
export class LiveStatusComponent {
  protected readonly live = inject(ChatLiveUpdates);

  constructor() {
    this.live.connect();
    // takeUntilDestroyed ends the subscription with the component.
    this.live.messageCreated$.pipe(takeUntilDestroyed()).subscribe(({ message }) => console.log(message.body));
  }
}

What the adapter does not do

It has no @Injectable() class. The package ships plain JavaScript with no Angular compiler pass, so a decorated class would lack Ivy metadata and fail dependency injection at runtime. Signals and Observables do not need it, so wrapping the factory in your own service is the supported pattern.
It has no connectionStateChange Observable. Read the Signal, or use effect.
It does not replay events. Events published while the stream reopens are lost, so reload data when connectionState() returns to connected.
There is no /push/angular entry point. Inject ChatPushClient into your own service. See Web push.