Introduction

In this blog, we will discuss how to create a like/dislike button in Angular js.

Step 1

Create an empty project with a meaningful name.

Step 2

Add web form, right click, add item, choose web form, and give it a name.

Step 3

Add script and style cdn link given below:

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Step 4

Write script for handling like/dislike events.

  1. <script type="text/javascript">
  2. var app = angular
  3. .module("myModule", [])
  4. .controller("myController", function ($scope) {
  6. var technologies = [
  7. { name: "C#", likes: 0, dislikes: 0 },
  8. { name: "ASP.NET", likes: 0, dislikes: 0 },
  9. { name: "ASP.NET MVC", likes: 0, dislikes: 0 },
  10. { name: "SQL", likes: 0, dislikes: 0 },
  11. { name: "AngularJS", likes: 0, dislikes: 0 },
  12. { name: "Angular 5", likes: 0, dislikes: 0 },
  13. { name: "JQuery", likes: 0, dislikes: 0 },
  14. { name: "JavaScript", likes: 0, dislikes: 0 }
  16. ];
  18. $scope.technologies = technologies;
  20. $scope.incrementLikes = function (technology) {
  21. technology.likes++;
  22. };
  24. $scope.incrementDislikes = function (technology) {
  25. technology.dislikes++;
  26. };
  27. });
  28. </script>

Step 5

Design HTML

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container">
  4. <table class="table table-bordered">
  5. <thead class="bg-danger text-uppercase text-white">
  6. <tr>
  7. <th>Technology</th>
  8. <th>Likes</th>
  9. <th>Dislikes</th>
  10. <th>Action(s)</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr ng-repeat="technology in technologies">
  15. <td>{{ technology.name }} </td>
  16. <td style="text-align: center">{{ technology.likes }} </td>
  17. <td style="text-align: center">{{ technology.dislikes }} </td>
  18. <td>
  19. <button type="button" class="btn btn-sm btn-success"><i class="fa fa-thumbs-up" ng-click="incrementLikes(technology)"></i></button>
  20. <button type="button" class="btn btn-sm btn-danger"><i class="fa fa-thumbs-down" ng-click="incrementDislikes(technology)"></i></button>
  21. </td>
  22. </tr>
  23. </tbody>
  24. </table>
  25. </div>
  26. </form>
  27. </body>

Complete code for entire page

  1. <!DOCTYPE html>
  3. <html ng-app="myModule">
  4. <head runat="server">
  5. <title></title>
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  10. <script type="text/javascript">
  11. var app = angular
  12. .module("myModule", [])
  13. .controller("myController", function ($scope) {
  15. var technologies = [
  16. { name: "C#", likes: 0, dislikes: 0 },
  17. { name: "ASP.NET", likes: 0, dislikes: 0 },
  18. { name: "ASP.NET MVC", likes: 0, dislikes: 0 },
  19. { name: "SQL", likes: 0, dislikes: 0 },
  20. { name: "AngularJS", likes: 0, dislikes: 0 },
  21. { name: "Angular 5", likes: 0, dislikes: 0 },
  22. { name: "JQuery", likes: 0, dislikes: 0 },
  23. { name: "JavaScript", likes: 0, dislikes: 0 }
  25. ];
  27. $scope.technologies = technologies;
  29. $scope.incrementLikes = function (technology) {
  30. technology.likes++;
  31. };
  33. $scope.incrementDislikes = function (technology) {
  34. technology.dislikes++;
  35. };
  36. });
  37. </script>
  39. </head>
  40. <body ng-controller="myController">
  41. <form id="form1" runat="server">
  42. <div class="container">
  43. <table class="table table-bordered">
  44. <thead class="bg-danger text-uppercase text-white">
  45. <tr>
  46. <th>Technology</th>
  47. <th>Likes</th>
  48. <th>Dislikes</th>
  49. <th>Action(s)</th>
  50. </tr>
  51. </thead>
  52. <tbody>
  53. <tr ng-repeat="technology in technologies">
  54. <td>{{ technology.name }} </td>
  55. <td style="text-align: center">{{ technology.likes }} </td>
  56. <td style="text-align: center">{{ technology.dislikes }} </td>
  57. <td>
  58. <button type="button" class="btn btn-sm btn-success"><i class="fa fa-thumbs-up" ng-click="incrementLikes(technology)"></i></button>
  59. <button type="button" class="btn btn-sm btn-danger"><i class="fa fa-thumbs-down" ng-click="incrementDislikes(technology)"></i></button>
  60. </td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </div>
  65. </form>
  66. </body>

Step 6

Run project ctrl+F5

Final output

output