ng-emphasis

An AngularJS directive that puts emphasis on words within a string of text give one or more search terms. Simply include ng-emphasis in your HTML element and watch the magic happen.

Install

Bower

bower install ng-emphasis

Usage

Require ng-emphasis in your application

angular.module('myApp', [
    'ng-emphasis'
]);

Style up ng-emphasis however you like

<style>
    .ng-emphasis { font-weight: bold; }
</style> 

Add an HTML element that uses ng-emphasis

<p ng-emphasis="'emphasis words'">Put emphasis on your words!</p>

You'll get this inside your DOM

<p ng-emphasis="emphasis words">Put <span class="ng-emphasis">emphasis</span> on your <span class="ng-emphasis">words</span>!</p>

Put emphasis on your words!

Try bind it to a list of items in scope

angular.module('myApp')
.controller('MainCtrl', function() {
    var vm = this;
 
    vm.search = 'Sara Jo';
    vm.users = [
        'John',
        'Sara',
        'Mel',
        'Jo'
    ];
});

<span ng-repeat="user in users" ng-emphasis="search">{{ user }}</span> 

John Sara Mel Jo

See it in action | Demo

Config

Configure the directive by injecting the configuration provider ngEmphasisConfigProvider.

angular.module('myApp')
.config(function(ngEmphasisConfigProvider) {
    // Configurations go here
});

setCssClass()

Sets the CSS class to use in the directive template. If not configured, ngEmphasis will default to ng-emphasis as the CSS class name.

ngEmphasisConfigProvider.setCssClass('highlight');