Module 6: Communicating with Firebase

Goals

• Push data to the Firebase real-time-database

• Retrieve information from the database

• Display the retrieved data on our page

Create a “Create” component

So, this project is called “Message Board” but we haven’t even done anything with any messages yet! All we’ve done so far is the configuration and setup. Now let’s actually work on the messages portion of this website! We need to build a create component that will allow users to make a new message. Run ng generate component create in the console.

Update the routes in app.module.ts for this new view. The routes should look like the following:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: '**', redirectTo: '/'
  }
];

Then we need to update the create link in our header.component.html to send users to this new component. You should notice a pattern now, these are the same things we'll do for most of the components we create.

<ul class="navbar-nav">
    <li><a class="white-text bg-dark navbar-dark nav-link" routerLink="/">Home</a></li>
    <li><a class="white-text bg-dark navbar-dark nav-link" routerLink="/create">Create</a></li>
</ul>

Now let’s build the form for users to input their new message. Open create.component.html and type in the following code to create that form.

<div class="container">
 <div class="card text-white bg-dark">

   <div class="card-header">
     <h3>Create a new message</h3>
   </div>

   <div class="card-body">
     <div class="card text-white bg-secondary mb-3">
       <div class="card-body">

         <div class="form-group">
           <label for="titleInput">Title:</label>
           <input class="form-control form-control-lg" placeholder="Title" id="titleInput" autofocus>
         </div>

         <div class="form-group">
           <label for="contentInput">Content:</label>
           <textarea class="form-control form-control-lg" rows="8" placeholder="Content" id="contentInput"></textarea>
         </div>

       </div>
     </div>
   </div>

   <div class="card-footer d-flex justify-content-end">
     <button class="btn btn-primary btn-md">Submit</button>
     <button class="btn btn-primary btn-md">Cancel</button>
   </div>

 </div>
</div>

And the following CSS rules into the create.component.css file.

/* Ensure the content is never covered by the footer, and is offset from the header */
.container {
     margin-bottom: 7.5rem;
     margin-top: 2rem;
}

/* Style the Submit and Cancel buttons */
.card-footer {
     margin-top: 2rem;
     background-color: #6c757d;
}
.btn {
     border: 0;
     font-weight: bold;
     letter-spacing: 0.75px;
     color: white;
     background-color: #343a40;
}
.btn:first-of-type {
     margin-right: 1rem;
}
.btn:hover {
     color: #343a40;
     background-color: #007bff;
}

You might be expecting the next steps by now, this is the same thing we did on the Register and on the Login pages! We need to create variables for the message “title” and the message “content” - and we’ll probably want a function named createMessage() too! Open create.component.ts and create those variables, and that function. Try it first on your own, then check below.

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

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
  newMessageTitle = '';
  newMessageContent = '';

  constructor() { }

  ngOnInit() {
  }

  createMessage() {
    if (
      this.newMessageTitle.trim() === '' || this.newMessageContent.trim() === ''
    ) {
      return;
    }
    // TODO: send to firebase
    console.log('title is: ' + this.newMessageTitle + ' content is: ' + this.newMessageContent);
  }
}

And now let’s link our input fields with our variables, make the “enter” button call the “createMessage()” function, and make the “submit” call that same function. Let's go back to our create.component.html.

    <div class="form-group">
        <label for="titleInput">Title:</label>
        <input class="form-control form-control-lg" placeholder="Title" id="titleInput" autofocus [(ngModel)]="newMessageTitle" (keyup.enter)="createMessage()">
        </div>

        <div class="form-group">
        <label for="contentInput">Content:</label>
        <textarea class="form-control form-control-lg" rows="8" placeholder="Content" id="contentInput" [(ngModel)]="newMessageContent"></textarea>
        </div>

    </div>
    </div>
</div>

<div class="card-footer d-flex justify-content-end">
    <button class="btn btn-primary btn-md" (click)="createMessage()">Submit</button>
    <button class="btn btn-primary btn-md">Cancel</button>
</div>

Notice the lack of the (keyup.enter) on the textarea? Since we’re using a textarea for the users to input the message content, users might make messages with multiple lines. We don’t want to create the message when they try to make a new line!

Serve up your web app, and you should be able to create a message! Or at least, the contents of the form get printed into the console. We’ll use a service to push the contents of the form off to Firebase in a moment.

First we need to protect the “create” view - we don’t want unauthenticated users to create messages, we only want people who have registered to have access to that view! This introduces a feature of Angular that is called “router guards” - it’s a chunk of code that guards a particular route from unauthorized access.

Next, we'll create a router guard, and a message service!