Chat App With Elastic Textarea - Ionic 4

Create A Project And Install This Packages

ionic start blank chatApp blank --type=angular

 For Elastic Textarea Install AutosizeModule

npm install ngx-autosize 

Optional 

npm install @ionic/labs 

Open home.module.ts and Import AutosizeModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';


import {AutosizeModule} from 'ngx-autosize';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AutosizeModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Open home.page.html 

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Chat App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
 <ion-grid>
   <ion-row *ngFor="let msg of messages">
    <ion-col size="9" *ngIf="currentUSer !== msg.user" class="message receive-message">
      <span class="msg">{{msg.msg}}</span> <br><br>
      <img src="{{msg.photo}}" class="profile-img" />
      <b class="username">{{msg.user}}</b>
      <div class="time" text-right>
        {{msg.datetime | date:'short'}}
      </div>
    </ion-col>
    <ion-col offset="3" size="9" *ngIf="currentUSer === msg.user" class="message my-message">
      <span class="msg">{{msg.msg}}</span> <br><br>
      <img src="{{msg.photo}}" class="profile-img" />
      <b class="username">{{msg.user}}</b>
      <div class="time" text-right>
        {{msg.datetime | date:'short'}}
      </div>
    </ion-col>
   </ion-row>
 </ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar color="light">
    <ion-row align-item-center no-padding>
      <ion-col size="10">
        <textarea autosize maxRows="3" [(ngModel)]="newMsg" class="msg-input"></textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
        (click)="sendMsg()">
          <ion-icon name="send"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

Open home.page.css

.message{
    padding: 10px;
    margin-bottom: 5px;
    white-space: pre-wrap;
}

.receive-message{
    background-color: var(--ion-color-tertiary);
    color: #fff;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
   
}

.my-message{
    background-color: var(--ion-color-secondary);
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0px
}

.time{
    color: bisque;
    float: righ;
    font-size: small;
}
.msg-input{
    width: 100%;
    border: 1px solid var(--ion-color-medium);
    border-radius: 10px;
    background: #fff;
    resize: none;
    padding-left: 10px;
    padding-right: 10px;
}

.msg-btn{
    --padding-start:0.5em;
    --padding-end:1em;
}
.profile-img{
    border-radius:10px; 
    width: 30px;
}
.username{
    font-size: small;
}
.msg{
    font-size: 20px;   
}



Open home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  messages = [
    {
      user:"Batman",
      datetime:12453678975,
      msg:"I am batman",
      photo:"../../assets/users/batman_user.png"
    },{
      user:"Shaktiman",
      datetime:102030405060,
      msg:"I am shaktiman",
      photo:"../../assets/users/shaktiman_user.png"
    },
    {
      user:"Tony Stark",
      datetime:12453678975,
      msg:"Can't Replace Me",
      photo:"../../assets/users/ironman_user.png"
    },
    {
      user:"Shaktiman",
      datetime:12453678975,
      msg:"No Need To Me, I Have My Own Space",
      photo:"../../assets/users/shaktiman_user.png"
    },
  ];
  currentUSer = "Shaktiman";
  newmsg:string ="";

  @ViewChild(IonContent, {read: false, static: true}) content: IonContent;
  constructor() {}

  sendMsg(){
    this.messages.push(
      {
        user:"Shaktiman",
        datetime:new Date().getTime(),
        msg:this.newmsg,
        photo:"../../assets/users/shaktiman_user.png"
      }
    );
    this.newmsg="";
    setTimeout(() => {
      this.content.scrollToBottom(200);
    });
  }
}