Highlighting links in text using “linky” filter

13 / Feb / 2015 by Rubi Saini 0 comments

At times we come across few cases where we need to differentiate the links amongst the plain text. Angular provide us with a very useful filter named : “linky” which help us to do so.

With the help of linky filter we can detect links from text and show them differently .  Linky takes text and produces HTML by wrapping all URLs into anchor tags. It supports email address , http, https, and mailto.

For this you would require the ngSanitize module in angular app.

In HTML binding

<p ng-bind-html=”myText | linky”> </p>

You can also define the target for high-lighted links like this-

<p ng-bind-html=”myText | linky :’_blank'”>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Lets try linky filter</title>
    <script type="application/javascript" src="angular.js"></script>
    <script src="LinkyCtrl.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    <div>
        <p ng-bind-html="myText | linky :'_blank'"></p>
        <textarea ng-model="myText" style="width: 420px; height: 120px"></textarea>
    </div>

</div>

</body>

</html>

In our angular controller,


var myApp = angular.module('myApp', ['ngSanitize'])
    .controller('myController', ['$scope', function ($scope) {
        $scope.myText = "Some default text is here http://www.intelligrape.com/";
}]);

So in this way we can quickly highlight the links in angular.

Hope this helps.

FOUND THIS USEFUL? SHARE IT

Leave a comment -