# AngularJS Events
* * *
AngularJS has its own HTML event directives.
* * *
## The ng-click Directive
The **ng-click** directive defines the AngularJS click event.
## AngularJS Example
{{ count }}
[Try it »](#)
* * *
## Hiding HTML Elements
The **ng-hide** directive is used to set the visibility of a part of an application.
**ng-hide="true"** makes the HTML element invisible.
**ng-hide="false"** makes the HTML element visible.
## AngularJS Example
First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
[Try it »](#)
Application Explanation:
The first part **personController** is similar to the Controllers chapter.
The application has a default property: **$scope.myVar = false;**
The **ng-hide** directive sets the visibility of the
element and the two input fields based on the value of **myVar** (true or false).
The **toggle()** function is used to toggle the value of the **myVar** variable (true and false).
**ng-hide="true"** makes the element **invisible**.
* * *
## Showing HTML Elements
The **ng-show** directive can be used to set the visibility of a part of an application.
**ng-show="false"** can make the HTML element **invisible**.
**ng-show="true"** can make the HTML element visible.
The following example uses the ng-show directive:
## AngularJS Example
YouTip