Todo List Tutorial
Primary version
Search
⌃K

#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;
}
import { Post } from 'src/app/models/post';
import { ActivatedRoute } from '@angular/router';
import { BlogService } from 'src/app/services/blog.service';
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();
}
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');
}
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.
Previous
#6 💅Add Feed
Next
#9 🚀Deploy
Last modified 4yr ago