Adding Live Chat Messages

Currently, the only way we can add new messages to our Firestore database is to do it manually through the emulator interface. In this lesson, we are going to provide a way to do it through the application.

Update the MessageService

Add the following method to the MessageService:

  addMessage(message: string) {
    const newMessage: Message = {
      author: '[email protected]',
      content: message,
      created: Date.now().toString(),
    };

    const messagesCollection = collection(this.firestore, 'messages');
    addDoc(messagesCollection, newMessage);
  }

An important thing to note here as that we are just using [email protected] as the author since we don’t have a login system/user authentication yet - we will need to come back to this method later to use the users actual email.

Just like with the getMessages example, we create a reference to the collection we are interested in:

const messagesCollection = collection(this.firestore, 'messages');

But this time, we use the addDoc method from @angular/fire/firestore to add the new document we just created to the messages collection. Note that we do not have to supply an id for our documents, this is created automatically by Firestore.

Create a Message Input Component

We are going to create another dumb component now for the HomeComponent called MessageInputComponent that will allow the user to enter a chat message. This component will use a form control with an <ion-textarea> component, and when the user clicks the send button it will emit the current value using an @Output and it will also reset the form control to clear the message.

If you want, this will be a good opportunity to try building an entire component by yourself. Give it a go, and I will have my full solution below.

Create a new file at home/ui/message-input.component.ts and add the following:

import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  NgModule,
  Output,
} from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-message-input',
  template: `
    <ion-toolbar color="primary">
      <ion-textarea
        [formControl]="messageControl"
        placeholder="type message..."
      ></ion-textarea>
      <ion-buttons slot="primary">
        <ion-button (click)="sendMessage()">
          <ion-icon name="send" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  `,
  styles: [
    `
      ion-textarea {
        font-size: 1.2em !important;
        --padding-top: 25px;
        --padding-start: 15px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MessageInputComponent {
  @Output() send = new EventEmitter<string>();

  messageControl = new FormControl('');

  sendMessage() {
    if (this.messageControl.value) {
      this.send.emit(this.messageControl.value);
      this.messageControl.reset();
    }
  }
}

@NgModule({
  declarations: [MessageInputComponent],
  exports: [MessageInputComponent],
  imports: [IonicModule, ReactiveFormsModule],
})
export class MessageInputComponentModule {}