#7 ✏️Edit Post

Read a blog post

We will add the feature of reading a blog. Create a new blog component. Right-click on the folder 📁components and then navigate to 'Angular Generator', select 'Component' and provide the name ‘blog’.

Add the router link for this component in app.module.ts as shown below

{ path: 'blog/:id/:slug', component: BlogComponent },

Add the following method definition in blog.service.ts file.

getPostbyId(postId: string) {
    const  userDetails = this.db.doc('blogs/' + postId).valueChanges();
    return  userDetails;
}

Open src/app/components/blog/blog.component.ts and add import definitions as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.ts#L2-L4

import { Post } from 'src/app/models/post';
import { ActivatedRoute } from '@angular/router';
import { BlogService } from 'src/app/services/blog.service';

Now put the code inside BlogComponent class as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.ts#L13-L30

Open src/app/components/blog/blog.component.html and replace what is there with the code shown below.

Finally we will add styling for BlogComponent. Open src/app/components/blog/blog.component.scss and replace what is there with the style definitions shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.scss

Delete a blog post

We will add the feature of deleting a blog. Add the following code in the src/app/services/blog.service.ts.

deletePost(blogID: string) {
    return  this.db.doc('blogs/' + blogID).delete();
}

Open src/app/components/blog-card/blog-card.component.ts and add the delete method definition as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-card/blog-card.component.ts#L26-L34

delete(postId) {
if (confirm('Are you sure')) {
  this.blogService.deletePost(postId).then(
    () => {
      alert("Blog deleted successfully");
    }
  );
 }
}

Edit an existing blog post

We will now implement the functionality to edit an existing blog. Add the following code definition in blog.service.ts.

updatePost(postId: string, post: Post) {
    const  putData = JSON.parse(JSON.stringify(post));
    return  this.db.doc('blogs/' + postId).update(putData);
}

Add the routing for edit functionality in app.module.ts as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/app.module.ts#L44

RouterModule.forRoot([
  ...
  { path: 'editpost/:id', component: BlogEditorComponent },
  ...
])

We will fetch the id of the blog from the URL with the help of ActivatedRoute class. Open blog-editor.component.ts and add the following code in the constructor.

if (this._route.snapshot.params['id']) {
    this.postId = this._route.snapshot.paramMap.get('id');
}

Update the ngOnInit method inside the BlogEditorComponent class as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L31-L43

ngOnInit() {
this.setEditorConfig();
if (this.postId) {
  this.formTitle = 'Edit';
  this.blogService.getPostbyId(this.postId).subscribe(
    (result: Post) => {
      if (result) {
        this.setPostFormData(result);
      }
    }
  );
 }
}

We will add the method to set the edit form when we click on “Edit” button on blog card in the home page. The method definition is shown below.

setPostFormData(postFormData) {
    this.postData.title = postFormData.title;
    this.postData.content = postFormData.content;
}

Upon clicking on Save we need to handle to case of both adding a new blog as well as editing an existing blog. Hence we will update the saveBlogPost as shown at https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L68-L83

saveBlogPost() {
if (this.postId) {
  this.blogService.updatePost(this.postId, this.postData).then(
    () => {
      this._router.navigate(['/']);
    }
  );
} else {
  this.postData.createdDate = this.datePipe.transform(Date.now(), 'MM-dd-yyyy HH:mm');
  this.blogService.createPost(this.postData).then(
    () => {
      this._router.navigate(['/']);
    }
  );
 }
}

This completes our application. We learned how to create a simple blogging application using Angular on frontend and cloud firestore as database.