Quick Contact


    Angular JS DOM

    What is DOM?

    A document object model is used for manipulating and accessing the contents in documents created using HTML or XML.

    What is DOM in AngularJS?

    The logical structure of documents and documents are accessed and manipulated are defined using DOM elements. It describes events, methods, properties for all HTML elements as objects. DOM in AngularJS acts as an API (programming interface) for javascript.

    Whenever a web page is loaded, the browser creates a Document Model Object (DOM).

    Why is DOM used?

    A programmer can use DOM in AngularJS for the following purposes:

    • Documents are built using DOM elements.
    • A Programmer can navigate documents structure with DOM elements.
    • A programmer can add elements and content with DOM elements.
    • Programmer can modify elements and content with DOM elements.

    Enroll Yourself in Live Classes For Online Summer Training.

    Directives for AngularJS HTML DOM

    We can use various directives to bind the application data to the attributes of DOM elements. Some of them are:

    • ng-disabled
    • ng-hide
    • ng-click
    • ng-show

    The directives used to bind the application data to the attributes of DOM elements such as ng-disabled, ng-show, ng-hide, ng-click.

    ng-disabled

    We can use ng-disabled for disabling a given control. Attributes of HTML elements can be disabled using the ng-disabled directive.

    We can use it by adding it to an HTML button and pass it to model

    The Syntax of ng-disabled-

    < input type = "checkbox" ng-model = "enableDisableButton">To disable a button

    < button ng-disabled = "enableDisableButton">Click< /button>

    Example-
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    	< body>
    	< div ng-app="" ng-init="value=true">
    	< p>< button ng-disabled="value">Click Here!< /button>< /p>
    	< p>< input type="checkbox" ng-model="value"/>Button< /p>
    	< p>{{ value }}< /p>
    	< /div> 
    	< /body>
    	< /html>
    	
    Output-

    Click Here!

    (checked) Button

    true

    The ng-disabled directive binds the application data value to the HTML button’s disabled attribute.

    The ng-model directive binds the value of the HTML checkbox element to the value of value (In the above code, value is the name of application data).

    If the value of value evaluates to true, the button will disable, and if the value of value evaluates to false, the controller will not disable.

    Output-

    Click Here!

    __ Button

    false

    ng-show

    We can use ng-show for showing a given control.

    We can use it by adding it to an HTML button and pass it to model.

    Syntax

    < input type = "checkbox" ng-model = "showHide1">To show a Button

    < button ng-show = "showHide1">Click < /button>

    Example
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="">
    	< input type = "checkbox" ng-model = "showhiddenbutton">Show button
    	< button ng-show = "showhiddenbutton">Click Here!< /button>
    	< /div>
    	< /body>
    	< /html>
    	
    Output-

    __ Show button

    When the checkbox is checked, the output displays a button of click here! Also.

    Output-

    (checked) Show button Click Here!

    ng-hide

    We can use ng-hide for hiding a given control.

    We can use it by adding it to an HTML button and pass it to the model.

    Syntax

    < input type = "checkbox" ng-model = "showHide2">To hide a Button

    < button ng-hide = "showHide2">Click< /button>

    Example
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< div ng-app="">
    	< input type = "checkbox" ng-model = "hidebutton">Hide Button
    	< button ng-hide = "hidebutton">Click Here!< /button>
    	< /div>
    	< /body>
    	< /html>
    	
    Output-

    __ Hide Button Click Here!

    When you checked the checkbox, the button click here! will get hidden

    Output-

    (checked) Hide Button

    ng-click

    We can use ng-click for representing an AngularJS click event.

    We can use it by adding it to an HTML button and pass it to model.

    Syntax

    < p>Number of click: {{ clickCounter }}< /p>

    < button ng-click = "clickCounter = clickCounter + 1">Click < /button>

    Example
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< div ng-app="">
    	< p>Total number of Clicks: {{ Counts }}< /p>
    	< button ng-click = "Counts = Counts+ 1">Click Here!< /button>
    	< /div>
    	< /body>
    	< /html>
    	
    Output:

    Total number of Clicks: 4

    Click Here!

    The number of times you will click on the button Click Here! will get displayed corresponding to the total number of clicks.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.