AngularJs ng click directive

AngularJs ng-click Example

Hello everyone, I am going to share the how to use AngularJs ngClick directive and its example in detail.

Live demo link for output : http://embed.plnkr.co/F7TcI8/preview

First, I am going to explain about ngClick directive.

The ngClick directive is used the handle the user click events of the applications.

Second, I am going to explain about syntax of ngClick.

<button type="button" ng-click="clickMe(IsDisplay)">NG-CLICK</button> 

Third, I am going to share the AngularJs click event code.

var app = angular.module('myApp', []);
    app.controller('ngClickCtrl', ["$scope", function ($scope) {
        $scope.domain = "code-sample.com";
        $scope.IsDisplay = false;
        $scope.clickMe = function (clicked) {
            $scope.IsDisplay = clicked == true ? false : true;
        };
    }]);

Last, I am going to share the live demo example with HTML and AngularJs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ng-click in AngularJs</title>
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('ngClickCtrl', ["$scope", function ($scope) {
            $scope.domain = "code-sample.com";
            $scope.IsDisplay = false;
            $scope.clickMe = function (clicked) {
                $scope.IsDisplay = clicked == true ? false : true;
            };
        }]);
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="ngClickCtrl">
        <div><h2>ng-click in AngularJs</h2> </div>
        <div>
            Domain name: <input type="text" ng-model="domain"> <button type="button" ng-click="clickMe(IsDisplay)">NG-CLICK</button>  
        </div>
        <div>
            <div ng-show="IsDisplay"> My Click function is called. <br /><h3 style="color:green;">Display User detail: {{domain}} </h3></div>
        </div>
    </div>
</body>
</html>





Thank you!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.