<div *ngIf="afAuth.authState | async as user; else showLogin">
<button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
<p>Please login to edit posts.</p>
<button (click)="login()">Login with Google</button>
</ng-template>

Update the content of `src/app/components/auth/auth.component.ts`:

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

import { AngularFireAuth } from 'angularfire2/auth';
import {Router, ActivatedRoute } from '@angular/router';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(public afAuth: AngularFireAuth, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((function(router, route) {
      return function() {
         route.queryParams.subscribe(
          data => router.navigate( [data['next']])  );
      };
    })(this.router, this.route));
  }

  logout() {
    this.afAuth.auth.signOut();
  }

}

In the code snippet above, we use methods provided by AngularFire2 to implement Login with Google functionality.

Editor Post View

<div>
 <div class="form-group">
 <label>Title</label>
 <input class="form-control" type="text" [(ngModel)]="formModel.title" (change)="update()"> 
 </div>
 <div class="form-group">
 <label>Content</label>
 <textarea class="form-control" [(ngModel)]="formModel.content" (change)="update()"></textarea> 
 </div>

</div>

In this markup, we have a simple form to edit the title and content of a single post; all changes made are auto-saved. Notice that we bind the `change` event to the `update` method.

Now, update the content of file located at src/app/modules/editor/components/editor-post/editor-post.component.ts 

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {Post} from '../editor-posts/editor-posts.component';
@Component({
  selector: 'app-editor-post',
  templateUrl: './editor-post.component.html',
  styleUrls: ['./editor-post.component.css']
})
export class EditorPostComponent implements OnInit {
  private postDoc: AngularFirestoreDocument;
  formModel: Post;
  constructor(private afs: AngularFirestore, private route: ActivatedRoute) {}

  update() {
    if (typeof this.postDoc !== "undefined") {
    // TODO throttle update
      this.postDoc.update(this.formModel);
    }
  }

  ngOnInit() {
    this.formModel = {title: '', content: ''};
     // subscribe to the parameters observable
    this.route.paramMap.subscribe(params => {
      this.getPost(params.get('id'));
    });
  }

  getPost(postId) {
    this.postDoc = this.afs.doc('posts/' + postId);
    this.postDoc.valueChanges().subscribe(v => {
      this.formModel = v;
    });
  }

}

The `getPost` method simply gets a post from Firestore using the postId parameter. In `ngOnInit`, we observe `this.route.paramMap` so we can retrieve the post id from the route parameter, after which we call the `getPost` method. The `getPost` method assigns an `AngularFirestoreDocument` to the instance variable `postDoc`. We then observe the document, so that once its value is available, we assign it to the class variable `formModel`.
The update method serves to persist the changes to our post document via the `AngularFirestoreDocument` update method.

The route /reader/posts should allow us to read a list of titles of all posts on the blog. Update the reader-posts component to enable this functionality. The file is located at  `src/app/modules/reader/components/reader-posts/reader-posts.component.html`:

<h3>Posts</h3>
<ul class="list-unstyled">
        <li class="mb-3 pb-2" *ngFor="let post of posts | async">
               <a  href="/post/{{ post.id }}">{{ post.data.title }}</a>
           </li>
</ul>

In the constructor `ReaderPostsComponent`, we inject `afs` an instance of `AngularFirestore`, we use the collection method from `AngularFirestore` to create an instance of `AngularFirestoreCollection` stored in the variable `postsCollection`. We then create an observable which will return the array of posts to the posts instance variable.

Reader Post View

The route /reader/post should allow us to read a single post on the blog. Update the reader-post component to enable this functionality. The file is located at `src/app/modules/reader/components/reader-post/reader-post.component.html`:

<h1>{{(post | async)?.title}}</h1>
<p>{{(post | async)?.content}}</p>

Now update the content of `src/app/modules/reader/components/reader-post/reader-post.component.ts`:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-reader-post',
  templateUrl: './reader-post.component.html',
  styleUrls: ['./reader-post.component.css']
})
export class ReaderPostComponent implements OnInit {
  private postDoc: AngularFirestoreDocument;
  post: any;
  constructor(private afs: AngularFirestore, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.getPost(params.get('id'));
    });
  }

  getPost(postId) {
    this.postDoc = this.afs.doc('posts/' + postId);
    this.post = this.postDoc.valueChanges();
  }

}

In the constructor, we inject `afs` and route. In the `ngOnInit` method, we observe route and execute the `getPost` method, once the route parameters are available. In the `getPost` method, we get the post to be displayed from Firestore.

Running the app

In the Server window, right click on FireBlog and click the green icon with label `Start Server`.