app.component.html - Connect to Chat

<p>
  <button (click)="connect()">Connect to chat</button>
</p>

app.component.html - List Messages

  <div>
    <h3>Messages in the conversation</h3>
    <ul>
      <li *ngFor="let message of messages">
        {{ message['message'] }}
      </li>
    </ul>
  </div>

app.component.html - My Conversations

  <div>
    <h3>My Conversations</h3>
    <ul>
      <li *ngFor="let channel of conversations">
        {{ channel.name }}
        <button (click)="getMessages(channel)">Get messages</button>
      </li>
    </ul>
    <div>
      {{ listConversationsResult }}
    </div>
  </div>

app.component.html - Send Message

  <div *ngIf="selectedChannel">
    <h3>Send a message to the selected channel</h3>
    <table>
      <tr>
        <td>
          <input
            type="text"
            placeholder="Type your message..."
            (input)="updateTextMessage($event)"
          />
        </td>
        <td>
          <button (click)="sendMessage()">Send</button>
        </td>
      </tr>
    </table>
  </div>

app.component.html - Start a conversation

  <div>
    <button (click)="startConversation()">Start a conversation</button>
    <div>
      {{ startConversationResult }}
    </div>
  </div>