Chat UI for ionic 3


I’ve created a chat interface whenever I send messages to dialog flow or receive messages from dialog flow they appear on the left side of the screen. I want my messages to be on the right side & dialog flow messages on the left side & both chat bubbles should of different colours. I have no idea how to differentiate them. Can someone help me? This is my HTML code.

  <div style="font-size:10px; text-align:center;">7 minutes ago</div>
  <div class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg">
      {{ msg }}

    <ion-input placeholder="Type here" [(ngModel)]="question" type="text"></ion-input>
    <ion-buttons right>
      <button ion-button clear icon-only id="sendicon" (click)="ask(question)">
        <ion-icon name="send"></ion-icon>

This is ts code.

ask(question) {
    try {
      var headers = new Headers();
      headers.append("Accept", 'application/json');
      headers.append('Content-Type', 'application/json' );
      headers.append('Authorization', 'Bearer ' + this.Access_token)
      let options = new RequestOptions({ headers: headers });

      let postParams = {
       "lang": "en",
      "query": question ,
      "sessionId": "12345",
      "timezone": "America/New_York"

      try{"", postParams, options)
        .subscribe(data => {
          let obj = JSON.parse(data['_body']);
          this.answer = obj.result.fulfillment.speech;

         }, error => {
          console.log(error);// Error getting the data


I want the UI should be as a general chat page/bot. Sending messages on right & receiving messages on left.


You could have something like this:

<div class="innermsg left" *ngIf="currentUserId != msg.userId">
      {{ msg }}
<div class="innermsg right" *ngIf="currentUserId == msg.userId">
      {{ msg }}

So you would need to pass the user/owner of each message, part of the messages array/object (so {{ msg }} needs to be something like {{ msg.text }} or whatever ) + notice I’ve added left and right class names to style left and right bubbles.

Hope that helps