chat.page.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <ion-header>
  2. <ion-toolbar color="primary">
  3. <ion-buttons slot="start">
  4. <ion-back-button defaultHref="/tabs/contacts"></ion-back-button>
  5. </ion-buttons>
  6. <ion-title>{{ contactName }}</ion-title>
  7. </ion-toolbar>
  8. </ion-header>
  9. <ion-content class="chat-content">
  10. <ion-list lines="none">
  11. <ion-item *ngFor="let message of messages" class="message-item">
  12. <ion-label class="message-container"
  13. [class.sent-message-container]="message.type === 'sent'"
  14. [class.received-message-container]="message.type === 'received'">
  15. <div class="message-details">
  16. <p [class.sent-message]="message.type === 'sent'"
  17. [class.received-message]="message.type === 'received'"
  18. class="message-text">{{ message.text }}</p>
  19. <div class="message-time">
  20. <p>{{ message.time }}</p>
  21. </div>
  22. </div>
  23. </ion-label>
  24. <ion-avatar slot="end" *ngIf="message.type === 'sent'" class="message-avatar sent-avatar">
  25. <img [src]="message.avatar">
  26. </ion-avatar>
  27. <ion-avatar slot="start" *ngIf="message.type === 'received'" class="message-avatar received-avatar">
  28. <img [src]="message.avatar">
  29. </ion-avatar>
  30. </ion-item>
  31. </ion-list>
  32. </ion-content>
  33. <ion-footer>
  34. <ion-toolbar>
  35. <ion-input placeholder="Type your message..." [(ngModel)]="newMessage" clearInput></ion-input>
  36. <ion-buttons slot="end">
  37. <ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
  38. </ion-buttons>
  39. </ion-toolbar>
  40. </ion-footer>