#7 ✏️Edit Post
Last updated
Was this helpful?
Last updated
Was this helpful?
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
Add the following method definition in file.
Open and add import definitions as shown at
Now put the code inside BlogComponent
class as shown at
Open 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
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.
This completes our application. We learned how to create a simple blogging application using Angular on frontend and cloud firestore as database.
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