AngularJS HTML DOM

The HTML DOM in AngularJS facilitates the directives that bind the application data with the attributes of HTML DOM elements. In this article, we will see such directives that help to bind the data to the HTML DOM element's attribute, along with their basic implementations through the illustrations.

ng-show & ng-hide Directive: Both the directives are used to show or hide the element of HTML. It depends upon either of the value of directives, i.e., either "true" or "false".

Example 1: This example describes the AngularJS HTML DOM by implementing the ng-show & ng-hide Directive.

Output:

👁 Image

ng-disabled Directive: It disables the attribute of HTML elements. It binds the data to the disabled HTML element's attributes.

Example 2: This example implements the ng-disabled Directive to enable and disable buttons using the checkbox.

Output:

👁 Image