This is documentation for the release candidate Stream Chat Angular SDK v6. For the latest stable version, see the latest version (v5).

Custom types

Most Stream entities (such as channel, message, user etc.) let you store custom data. To make it easier to work with that data you can use declaration merging to define the shape of your custom data.

Full list of custom interfaces

The SDK defines some custom properties that are used within the SDK. To get proper type checking for these you need to create a d.ts file, for example src/app/stream-chat.d.ts:

import { DefaultAttachmentData, DefaultChannelData } from "stream-chat-angular";

declare module "stream-chat" {
  interface CustomChannelData extends DefaultChannelData {}

  interface CustomAttachmentData extends DefaultAttachmentData {}
}

Full list of SDK custom interfaces

It’s also possible to add your own custom fields:

import { DefaultAttachmentData, DefaultChannelData } from "stream-chat-angular";

declare module "stream-chat" {
  interface CustomChannelData extends DefaultChannelData {
    color: string;
    topic: "gardening" | "cats" | "f1";
  }

  interface CustomUserData {
    nickname: string;
  }

  interface CustomMessageData {
    isSecret: boolean;
  }

  interface CustomAttachmentData extends DefaultAttachmentData {
    lat?: string;
    lon?: string;
  }

  interface CustomReactionData {
    // Turn off type checks for custom properties
    [key: string]: unknown;
  }
}

Then your custom data will be properly typed:

let channel: Channel | undefined;
console.log(channel?.data?.topic);

let user: User | undefined;
console.log(user?.nickname);

let message: StreamMessage | undefined;
console.log(message?.isSecret);

let attachment: Attachment | undefined;
console.log(attachment?.lat);
console.log(attachment?.lon);

let reaction: Reaction | undefined;
// CustomReactionData allows any key on Reaction
console.log(reaction?.foo);

If you don’t want type checks for custom properties you can define the custom interface like this:

interface CustomMessageData {
  // Turn off type checks for custom properties
  [key: string]: unknown;
}

Customization

Responsive layout