In the chat message form component, we implement the message form to send the message to Firebase and update the list with a new message.
For these actions, we will require the following two elements:
- Input with a text area: The input text allows a user to type their message. We use
(key.enter)in the input text to handle the keyboard's Enter key, and this calls thesendMessage()method. - Send button: This calls the
sendMessage()method and updates the Firebase database.
Here's the complete chat-message-form.component.html as of now:
<div class="chat-message-form-main-container">
<div class="chat-message-form-container">
<input type="textarea" placeholder="Type a message"
class="message-text" [(ngModel)]="newMessage"
(keyup.enter)="sendMessage()">
<button (click)="sendMessage()"
class="btn btn-outline-success my-2 my-sm-0"
type="submit">SEND</button>
</div>...