next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

<div class="chat-messages">
  <!-- MESSAGE -->
  <div
    *ngFor="let message of messages; let i = index"
    class="message-row"
    [ngClass]="{
      me: message.senderSeq === loginRes.userSeq,
      contact: message.senderSeq !== loginRes.userSeq
    }"
  >
    <ng-container [ngSwitch]="message.type">
      <div *ngSwitchCase="EventType.Character">Character</div>
      <div *ngSwitchCase="EventType.Join">Join</div>
    </ng-container>

    <img *ngIf="" src="" class="avatar" />

    <div class="bubble">
      <div class="message">
        {{ message.sentMessage }}
      </div>
      <div class="time secondary-text">
        {{ message.sendDate | date: 'short' }}
      </div>
    </div>
  </div>
</div>