AngularJS ng-href Directive

The AngularJS ng-href directive provides a replacement for the original href attribute of an <a> element. You can use the ng-href directive instead of href if you have AngularJS code inside the href value.

The ng-href directive ensures that the link is not broken even if the user clicks the link beforethe code execution. It is supported by <a> element.

Syntax:

Parameter explanation:

string: It specifies a string value, or an expression resulting in a string.

Let's take an example to demonstrate the ng-href directive.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-init="myVar = 'http://www.javatpoint.com/java-tutorial'">
<h1>Java Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn java.</p>
</div>
<p>You can use here original href attribute, but in AngularJS, the ng-href attribute is safer.</p>
</body>
</html>

Test it Now

Next Topicangularjs-ng-if-directive

← prev next →