#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.
{{postData.title}}
 {{postData.createdDate | date:'longDate'}}
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.

#6 💅Add Feed

#9 🚀Deploy

Last modified 2yr ago

Copy link

On this page

Read a blog post

Delete a blog post

Edit an existing blog post