Highlight Text Using Mark.js in Angular Js

In This Article, I’m going to show you step by step how to highlight text using mark.js in Angular Js

Step 1: Open Npm Terminal and Move to Angular Project Folder by using Following Basic command “cd project_name”

Step 2: After that, Type command “npm install mark.js — save-dev” to install mark.js packages.

Step 3: Add Basic Search Text Field ,Few Html Text with inline-styling in app.component.html file as shown below.

After Adding Dummy Html Text, Input Field with Basic Styling

Step 4: After That Binding Input event to highlightText() method on input field and defining that highlightText() method in app.component.ts

Input Event: Execute a JavaScript when a user writes something in an <input> field:

Step 5: Import Mark.js in app.component.ts file using require keyword.

Step 6:

Each API method below can be called on an instance object. To initialize a new instance you have to use:

var instance = new Mark(context);

The variable context defines where you want mark.js to search for matches. You can pass a single element (e.g. the return value of document.getElementById(...) or document.querySelector(...)).

If for example you’d like to highlight matches in a div with a class context then you'd have to use:

var instance = new Mark(document.querySelector(“div.context”));

OR

var instance = new Mark(“div.context”);

mark()

A method to highlight custom search terms.

There are other methods available like unmark(),markRegExp(), You can check these methods at official mark.js website https://markjs.io/

Adding Unmark Function(unmark()) is useful because it removes previous highlight’s.

Note When You run your project you may face following error

To Handle This Error Just Add Following Line

Step 7: Finally We highlighted search text using mark.js in Angular Js

I hope you will find this article useful & helpful, So don’t forget to press like & Clapping Button. Also Share This Article to help others people . If You have any questions regarding this article ,Please Just leave a message I will try my best to provide you best answer in short time.

Thank you very much for reading this article …