In the previous part of this tutorial series, you learnt how to implement the functionality to edit the blog post details.
In this part, you'll implement the functionality to delete an existing blog post and to implement the user logout functionality.
Getting Started
Let's get started by cloning the source code from the last part of the tutorial series.
1 |
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost |
Navigate to the project directory and install the required dependencies.
1 |
cd DeletePost/client
|
2 |
npm install
|
3 |
cd DeletePost/server
|
4 |
npm install
|
Once you have the dependencies installed, restart the client and server application.
1 |
cd DeletePost/client
|
2 |
npm start |
3 |
cd DeletePost/server
|
4 |
node app.js |
Point your browser to http://localhost:4200 and you will have the application running.
Adding Delete Confirmation
You have already added the delete icon to the listed blog posts. When the user clicks the delete icon corresponding to any blog post, you need to show a delete confirmation popup. If the user confirms the deletion process then only the blog post needs to be deleted.
Let's get started with adding a modal popup confirmation when the user clicks the delete button. Add the following modal popup code to the show-post.component.html file.
1 |
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
2 |
<div class="modal-dialog" role="document"> |
3 |
<div class="modal-content"> |
4 |
<div class="modal-header"> |
5 |
<h5 class="modal-title" id="exampleModalLabel">Delete Post</h5> |
6 |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
7 |
<span aria-hidden="true">×</span> |
8 |
</button>
|
9 |
</div>
|
10 |
<div class="modal-body"> |
11 |
Are you sure ? |
12 |
</div>
|
13 |
<div class="modal-footer"> |
14 |
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
15 |
<button type="button" class="btn btn-primary">Delete</button> |
16 |
</div>
|
17 |
</div>
|
18 |
</div>
|
19 |
</div>
|
Modify the delete icon to include the data-target attribute as shown:
1 |
<i data-toggle="modal" data-target="#deleteModal" title="Delete" class="fas fa-trash-alt" aria-hidden="true"></i> |
Save the above changes and restart the client server. Sign into the application and click on the delete icon corresponding to any blog post, and you will have the confirmation modal popped up.
Creating the Delete Blog Post API
Let's create a REST API endpoint to delete the blog post. In the server/app.js file, create a REST API endpoint to handle blog post deletion based on the blog post id. Here is how the REST API endpoint looks:
1 |
app.post('/api/post/deletePost', (req, res) => { |
2 |
|
3 |
})
|
Start by connecting to the MongoDB database using the Mongoose client.
1 |
mongoose.connect(url, { useMongoClient: true }, function(err){ |
2 |
// connection established
|
3 |
});
|
You'll make use of the findByIdAndRemove method to find the blog post using the id and delete it. Once the blog post has been deleted successfully, you'll return the status as a response. Here is how the REST API endpoint looks:
1 |
app.post('/api/post/deletePost', (req, res) => { |
2 |
mongoose.connect(url, { useMongoClient: true }, function(err){ |
3 |
if(err) throw err; |
4 |
Post.findByIdAndRemove(req.body.id, |
5 |
(err, doc) => { |
6 |
if(err) throw err; |
7 |
return res.status(200).json({ |
8 |
status: 'success', |
9 |
data: doc |
10 |
})
|
11 |
})
|
12 |
});
|
13 |
})
|
Making a Call to the Delete API
When the user clicks the delete icon, you need to keep the post details in a variable. If the user proceeds with the delete option after confirmation, you'll make a call to the delete REST API.
Add a method called setDelete on the delete button click in show-post.component.html. Here is how it looks:
1 |
<i (click)="setDelete(post)" data-toggle="modal" data-target="#deleteModal" title="Delete" class="fas fa-trash-alt" aria-hidden="true"></i> |
Inside the show-post.component.ts file, define a variable called post_to_delete.
Define the method called setDelete inside show-post.component.ts to keep the post details to be deleted.
1 |
setDelete(post: Post){ |
2 |
this.post_to_delete = post; |
3 |
}
|
When the user clicks the cancel button of the popup, you need to call a method called unsetDelete to set the post_to_delete to null. Here is how it looks:
1 |
unsetDelete(){ |
2 |
this.post_to_delete = null; |
3 |
}
|
Here is how the Cancel button HTML code for show-post.component.html looks:
1 |
<button #closeBtn (click)="unsetDelete()" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
Now let's define the service method called deletePost inside the show-post.service.ts file. Here is how it looks:
1 |
deletePost(id){ |
2 |
return this.http.post('/api/post/deletePost',{id : id}) |
3 |
}
|
To call the service method from the ShowPostComponent, define a method called deletePost which will subscribe to the deletePost method from the ShowPostService. Here is how the deletePost method from the ShowPostComponent looks:
1 |
deletePost(){ |
2 |
this.showPostService.deletePost(this.post_to_delete._id).subscribe(res => { |
3 |
this.getAllPost(); |
4 |
})
|
5 |
}
|
Once the post has been deleted, you need to refresh the post list, hence you need to make a call to the getAllPost method. You also need to close the popup once the deletion is successful.
First, import a reference to ViewChild and ElementRef in the show-post.component.ts file.
1 |
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
Define a variable closeBtn to create a reference to the popup close button.
1 |
@ViewChild('closeBtn') closeBtn: ElementRef; |
Now, when the delete call is successful, you need to close the delete confirmation popup.
Here is how the modified deletePost method looks:
1 |
deletePost(){ |
2 |
this.showPostService.deletePost(this.post_to_delete._id).subscribe(res => { |
3 |
this.getAllPost(); |
4 |
this.closeBtn.nativeElement.click(); |
5 |
})
|
6 |
}
|
Here is how the show-post.component.ts file looks:
1 |
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
2 |
import { ShowPostService } from './show-post.service'; |
3 |
import { Post } from '../models/post.model'; |
4 |
import { CommonService, } from '../service/common.service'; |
5 |
|
6 |
@Component({ |
7 |
selector: 'app-show-post', |
8 |
templateUrl: './show-post.component.html', |
9 |
styleUrls: ['./show-post.component.css'], |
10 |
providers: [ ShowPostService ] |
11 |
})
|
12 |
export class ShowPostComponent implements OnInit { |
13 |
|
14 |
@ViewChild('closeBtn') closeBtn: ElementRef; |
15 |
|
16 |
public posts : any []; |
17 |
public post_to_delete; |
18 |
|
19 |
constructor(private showPostService: ShowPostService, private commonService: CommonService) { |
20 |
|
21 |
}
|
22 |
|
23 |
ngOnInit(){ |
24 |
this.getAllPost(); |
25 |
|
26 |
this.commonService.postAdded_Observable.subscribe(res => { |
27 |
this.getAllPost(); |
28 |
});
|
29 |
}
|
30 |
|
31 |
setDelete(post: Post){ |
32 |
this.post_to_delete = post; |
33 |
}
|
34 |
|
35 |
unsetDelete(){ |
36 |
this.post_to_delete = null; |
37 |
}
|
38 |
|
39 |
getAllPost(){ |
40 |
this.showPostService.getAllPost().subscribe(result => { |
41 |
console.log('result is ', result); |
42 |
this.posts = result['data']; |
43 |
});
|
44 |
}
|
45 |
|
46 |
editPost(post: Post){ |
47 |
this.commonService.setPostToEdit(post); |
48 |
}
|
49 |
|
50 |
deletePost(){ |
51 |
this.showPostService.deletePost(this.post_to_delete._id).subscribe(res => { |
52 |
this.getAllPost(); |
53 |
this.closeBtn.nativeElement.click(); |
54 |
})
|
55 |
}
|
56 |
|
57 |
}
|
Save the above changes and restart the client and server application. Sign in to the application and click on the delete icon corresponding to any blog post. You will have a confirmation box popped up. Confirm the blog post deletion, and the blog post will be deleted and the blog post list will be updated.
Handling User Session During Sign-In
When the user signs in to the application, you'll keep the logged-in username in a localstorage. Modify the validateLogin method inside the LoginComponent to store the logged-in username in localstorage.
When the result from the API call is validated, add the following code to store the logged-in username.
1 |
localStorage.setItem('loggedInUser', this.user.username); |
Here is how the validateLogin method looks:
1 |
validateLogin() { |
2 |
if(this.user.username && this.user.password) { |
3 |
this.loginService.validateLogin(this.user).subscribe(result => { |
4 |
if(result['status'] === 'success') { |
5 |
localStorage.setItem('loggedInUser', this.user.username); |
6 |
this.router.navigate(['/home']); |
7 |
} else { |
8 |
alert('Wrong username password'); |
9 |
}
|
10 |
}, error => { |
11 |
console.log('error is ', error); |
12 |
});
|
13 |
} else { |
14 |
alert('enter user name and password'); |
15 |
}
|
16 |
}
|
Now, inside the home.component.html file, add a method called logout to the log out button.
1 |
<button (click)="logout()" type="button" class="btn btn-link"> |
2 |
Logout |
3 |
</button>
|
Inside the home.component.ts file, create a method called logout. Inside the logout method, you need to clear the local storage for the loggedInUser. Here is how the method looks:
1 |
logout(){ |
2 |
localStorage.removeItem('loggedInUser'); |
3 |
this.router.navigate(['/']); |
4 |
}
|
In the HomeComponent's constructor method, you need to add a check for the loggedInUser local storage key. If not found, you need to redirect to the sign in page. Here is how the home.component.ts file looks:
1 |
import { Component, ViewChild, ElementRef } from '@angular/core'; |
2 |
import { CommonService } from '../service/common.service'; |
3 |
import { Router } from '@angular/router'; |
4 |
|
5 |
@Component({ |
6 |
selector: 'app-home', |
7 |
templateUrl: './home.component.html', |
8 |
styleUrls: ['./home.component.css'] |
9 |
})
|
10 |
export class HomeComponent { |
11 |
|
12 |
@ViewChild('addPost') addBtn: ElementRef; |
13 |
|
14 |
constructor(private commonService: CommonService, private router: Router){ |
15 |
|
16 |
if(!localStorage.getItem('loggedInUser')){ |
17 |
this.router.navigate(['/']); |
18 |
}
|
19 |
|
20 |
this.commonService.postEdit_Observable.subscribe(res => { |
21 |
this.addBtn.nativeElement.click(); |
22 |
});
|
23 |
|
24 |
}
|
25 |
|
26 |
logout(){ |
27 |
localStorage.removeItem('loggedInUser'); |
28 |
this.router.navigate(['/']); |
29 |
}
|
30 |
|
31 |
}
|
Save the above changes and restart the client server. Try to access the home page by loading the URL http://localhost:4200/home in the browser window. You will be redirected to the login page.
Sign in to the application and click on the log out button. You will be logged out and redirected to the login page.
Wrapping It Up
In this part of the tutorial series, you learnt how to implement the blog post deletion by adding an icon to the blog post list. You also created a REST API for deleting the blog post details from the MongoDB database using the Mongoose client.
You have only implemented the very basic features of a blog application, and this application can be developed further to include many more features.
How was your experience learning to create a blogging application using Angular and MongoDB? Do let us know your thoughts and suggestions in the comments below.
Source code from this tutorial is available on GitHub.
And finally, remember that JavaScript is the language of the web. It’s not without its learning curves, but if you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.
