Post
Ask Question

How To Create Like/Dislike In Angular

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) {  
  5.   
  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 }  
  15.   
  16.                 ];  
  17.   
  18.                 $scope.technologies = technologies;  
  19.   
  20.                 $scope.incrementLikes = function (technology) {  
  21.                     technology.likes++;  
  22.                 };  
  23.   
  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>  
  2.   
  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) {  
  14.   
  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 }  
  24.   
  25.                 ];  
  26.   
  27.                 $scope.technologies = technologies;  
  28.   
  29.                 $scope.incrementLikes = function (technology) {  
  30.                     technology.likes++;  
  31.                 };  
  32.   
  33.                 $scope.incrementDislikes = function (technology) {  
  34.                     technology.dislikes++;  
  35.                 };  
  36.             });  
  37.     </script>  
  38.   
  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

Next Recommended Reading Creating A Nested Component In Angular 4