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

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{
// }