app.component.ts - Class variables

// Flag to check if the chat is connected or not
connected = false;

// String with the error (in case of any, when creating a group channel)
startConversationResult: string;

// List of this signed user's group channels
conversations: Array<SendBird.GroupChannel> | null;

// String with the error (in case of any, when trying to list our group channels)
listConversationsResult: string | null;

// Keep track of the selected group channel
selectedChannel: SendBird.GroupChannel | null;

// The list of messages obtained from the selected group channel
messages: Array<SendBird.UserMessage | SendBird.FileMessage | SendBird.AdminMessage> | null;

// Input text to send as a message to the group channel
textMessage: any;

app.component.ts - Connect to Sendbird

  connect() {
    this.chatService.connect('sendbird', null, (error: any, user: any) => {
      if (!error) {
        // We are connected to Sendbird servers!
        this.registerEventHandlers();
        this.getMyConversations();
        this.connected = true;
      }
    });
  }

app.component.ts - Get list of channels

  getMyConversations() {
    this.chatService.getMyGroupChannels(
      (
        error: SendBird.SendBirdError,
        groupChannels: Array<SendBird.GroupChannel>
      ) => {
        if (error) {
          this.listConversationsResult = 'Unable to get your conversations';
        } else {
          this.conversations = groupChannels;
        }
      }
    );
  }

app.component.ts - Implement OnInit

export class AppComponent implements OnInit { 
  ... 
}

app.component.ts - List messages in a channel

  getMessages(channel: SendBird.GroupChannel) {
    this.selectedChannel = channel;
    this.chatService.getMessagesFromChannel(
      channel,
      (
        error: SendBird.SendBirdError,
        messages: Array<
          SendBird.UserMessage | SendBird.FileMessage | SendBird.AdminMessage
        >
      ) => {
        if (!error) {
          this.messages = messages;
        }
      }
    );
  }

app.component.ts - Register event handlers

  registerEventHandlers() {
    this.chatService.registerEventHandlers(
      '123',
      (data: { event: string; data: any }) => {
        console.log('New event: ' + data.event, data.data);
        if (this.selectedChannel) {
          if (data.event == 'onMessageReceived' && this.messages) {
            if (data.data.channel.url == this.selectedChannel.url) {
              this.messages.push(data.data.message);
            }
          }
        }
      }
    );
  }

app.component.ts - Send a message

  sendMessage() {
    this.chatService.sendMessage(
      this.selectedChannel,
      this.textMessage,
      (error: SendBird.SendBirdError, userMessage: SendBird.UserMessage) => {
        this.getMessages(this.selectedChannel);
      }
    );
  }

app.component.ts - Start a conversation

  startConversation() {
    let channelName = 'android-tutorial';
    let userIds = ['myTestUserId'];
    this.chatService.createGroupChannel(
      channelName,
      userIds,
      (error: SendBird.SendBirdError, groupChannel: SendBird.GroupChannel) => {
        if (error) {
          this.startConversationResult = 'Error creating the conversation';
        } else {
          this.startConversationResult = 'Conversation created';
          this.getMyConversations();
        }
      }
    );
  }