How to make new line input message by pressing shift + enter? Angular

Question

I have a chat box with a single input field. I want to make handle new line input like Facebook's chatbox.

My Chat Box: [1]: https://i.stack.imgur.com/NeG7d.png

My HTML of input field:

<form class="form" #msgForm="ngForm" (ngSubmit)="send(msgForm)" focus>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
        <input type="search" autocomplete="off" class="form-control left-border-none"
          name="message" [(ngModel)]="message" placeholder="Say Something..."
          (input)="onChange($event.target.value)" />
        <span class="input-group-addon transparent">
          <button type="submit" (keyup.enter)="send(msgForm)"
            style="border: 0; background: none;cursor: pointer;"><i class="fa fa-paper-plane" [hidden]="isHidden" 
            style="font-size:20px;color:  #6d5cae;"></i></button>
        </span>
      </div>
    </div>
  </div>
</form>

Answer 1

Here's my solution.

Brief Note
It's not the exact answer because I had the same problem and after a lot of testing, found more adequate to let "Enter" for newlines and"Shift+Enter" for sending messages

This is the opposite logic of popular apps like WS and MSg but I found more suitable for people having a conversations over a web based chat, since in a conversation you want sometimes to write long messages, and for people habituated to type on text editors, this is the logic function of pushing "Enter". People may disagree, but just hope you can find it useful

What I did was to using a text-area as container, for easier auto-sizing and multi-line configuration

After that, I created a button that posts the message once clicked,and a @Hostlistener for the event to bind the button to the method.

Please refer to the code.

Best regards

HTML from the typing bar component

<!-- (keydown)="onKey($event)" -->
<!-- submit message with enter -->
<!-- (keydown.enter)="postMessage(messageContainer)" -->
<!-- (keyup.enter)="onKeydown($event)" // for event methods -->

<div class="typing-bar prim-color" >
  <textarea

    matInput
    matAutosize
    name=""

    cdkTextareaAutosize
    #messageContainer
    #autosize="cdkTextareaAutosize"
    cdkAutosizeMinRows="2"
    cdkAutosizeMaxRows="7"
  >
  </textarea>
  <button
  mat-stroked-button
  color="accent"
  (click)="postMessage(messageContainer)"
  [disabled]="messageContainer.value===''"
  ><mat-icon>send</mat-icon> Send</button>

</div>

TS Code for the component

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-typing-bar',
  templateUrl: './typing-bar.component.html',
  styleUrls: ['./typing-bar.component.scss']
})
export class TypingBarComponent implements OnInit {

  displayBar: boolean = true;



  constructor() { }

  ngOnInit(): void {
  }

  @HostListener('body:keydown.shift.enter',['$event'])launchPost($event: KeyboardEvent): void{
    return this.postMessage($event.target as HTMLTextAreaElement)
  }

  postMessage(textarea:HTMLTextAreaElement){
    //post message here
    // ....logic...

    //reset textarea
    textarea.value = ""

    //give focus back
    textarea.focus();

    //debug: this is for test only. Delete after testing
    alert('sent')
  }

}

SCSS code for the component (maybe not the final version)

.typing-bar{
  display: flex;
  justify-content: space-around;
  padding: 3px;
  padding-right: 10px;
  margin: 1px;

  position: sticky;
  bottom: 0;
}


textarea {
  overflow: auto;
  width: 93%;
//   max-height: 20%;
  border-radius: 10px;
  font-size: 1.3em;
  font-family: Arial, Helvetica, sans-serif;
}

// .typing-bar button{

// }