Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • 👀About
    • #0: 💃 Introduction
    • #1: ⌛ Installations
      • a. StackBlitz instructions
    • #2: 🅰 Angular kicks in
    • #3: 📐 Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: 💼 Class
    • #6: 📥 Property binding
    • #7: 📤Event binding
    • #8: 📎 Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: 📋 The To Do list
    • #10: ➕ New component: todo-item
    • #11: ⛓ Interface
      • a. StackBlitz instructions
    • #12: 📌Add items
    • #13: 🚧 Refactor App Component
    • #14: 💅 Adding Style
    • #15: 🔋 Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: 💾Local storage
    • #18: 🗑 Remove item
    • #19: 🔘 Adding a checkbox
    • #21: 💪 Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: 🛰 Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 ⚙️Configuring firebase
      • #2 💅Add Angular Material
      • #3 💅Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 ⚙️Connect Database
      • #6 💅Add Feed
      • #7 ✏️Edit Post
      • #9 🚀Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  • Read a blog post
  • {{postData.title}}
  • Delete a blog post
  • Edit an existing blog post
  1. More Workshops
  2. Blog Editor

#7 ✏️Edit Post

Previous#6 💅Add FeedNext#9 🚀Deploy

Last updated 5 years ago

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 as shown below

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

Add the following method definition in file.

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

Open and add import definitions as shown at

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

Open and replace what is there with the code shown below.

{{postData.title}}

{{postData.createdDate | date:'longDate'}}

Delete a blog post

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

updatePost(postId: string, post: Post) {
    const  putData = JSON.parse(JSON.stringify(post));
    return  this.db.doc('blogs/' + postId).update(putData);
}
RouterModule.forRoot([
  ...
  { path: 'editpost/:id', component: BlogEditorComponent },
  ...
])
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;
}
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.

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

We will add the feature of deleting a blog. Add the following code in the .

Open and add the delete method definition as shown at

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

Add the routing for edit functionality in app.module.ts as shown at

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

Update the ngOnInit method inside the BlogEditorComponent class as shown at

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

app.module.ts
blog.service.ts
src/app/components/blog/blog.component.ts
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.ts#L2-L4
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.ts#L13-L30
src/app/components/blog/blog.component.html
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog/blog.component.scss
src/app/services/blog.service.ts
src/app/components/blog-card/blog-card.component.ts
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-card/blog-card.component.ts#L26-L34
blog.service.ts
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/app.module.ts#L44
blog-editor.component.ts
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L31-L43
https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-editor/blog-editor.component.ts#L68-L83