Search for a command to run...
Use the directive to highlight search matches in a paragraph with ease.
Full stack web developer with main focus in Angular and NodeJs. Loves creating blogs, a side projects when I can find time.
No comments yet. Be the first to comment.
People who are familiar with Figma would have noticed that the input fields support dragging to increase or decrease values. Instead of having to click on the input field first and then type the number in, the dragging feature is really handy as you ...
Show customizable markers on the calendar easily.
In the previous article, I shared how to set up Coolify and deploy a Node.js application on a VPS using Nixpacks. It is the easiest way to deploy applications using Coolify. We don't need any knowledge of Docker. Read Here: Deploy Node.js application...
Beginners guide on how to easily deploy a node application on a VPS.
Let's look at one way to architect Angular's highly customizable and dynamic card list component. The goal is to make it easier to render different kinds of card lists using one single component. Dynamic Card List Component The component should be dy...
How to highlight text in a paragraph with the help of directives in Angular. Especially helpful in highlighting text matching the search term. You could have come across this in your browser or IDE when you search for something, the matching items will be highlighted to point you to the exact place of occurrence.
Here is what we are going to build in this post. A very simple and straightforward highlight directive in Angular. We see something similar in chrome dev tools.
The idea is pretty simple. We just have to match the searched term and somehow wrap the matched text in a span or mark ( ref ) tag so that we can style them later according to our needs.
We are going to use Regex to find matches in our paragraph. Regex makes it very simple to do operations like this on strings. The directive should be ideally added only to elements with text in it.
This is what we are building:
So let's plan out our directive.
The main input to the directive is the term that needs to be highlighted. So yeah, we will use @Input() to pass the term to our directive. I think that is pretty much what we need inside the directive
So now we need to get hold of the actual paragraph to search in. So there is an easy way to get the text from an HTMLElement. We can use the textContent( ref ) which should give us the text to search in.
As always, I would recommend you create a new module only for the directive. And If you really properly manage your codebase, you can consider creating it as a library within the project as well.
To keep things simple, we put our code in a lib folder:
lib/
├── highlight/
│ ├── highlight.module.ts
│ ├── highlight.directive.ts
This module would be simple declaring our directive and exporting it. Nothing much is needed here.
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { HighlightDirective } from "./highligh.directive";
@NgModule({
declarations: [HighlightDirective],
imports: [CommonModule],
exports: [HighlightDirective]
})
export class HighlightModule {}
Now that our setup is complete, we can start creating our directive where all our magic is going to happen.
import {
Directive,
ElementRef,
HostBinding,
Input,
OnChanges,
SecurityContext,
SimpleChanges
} from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
@Directive({
selector: "[highlight]"
})
export class HighlightDirective implements OnChanges {
@Input("highlight") searchTerm: string;
@Input() caseSensitive = false;
@Input() customClasses = "";
@HostBinding("innerHtml")
content: string;
constructor(private el: ElementRef, private sanitizer: DomSanitizer) {}
ngOnChanges(changes: SimpleChanges) {
if (this.el?.nativeElement) {
if ("searchTerm" in changes || "caseSensitive" in changes) {
const text = (this.el.nativeElement as HTMLElement).textContent;
if (this.searchTerm === "") {
this.content = text;
} else {
const regex = new RegExp(
this.searchTerm,
this.caseSensitive ? "g" : "gi"
);
const newText = text.replace(regex, (match: string) => {
return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
});
const sanitzed = this.sanitizer.sanitize(
SecurityContext.HTML,
newText
);
this.content = sanitzed;
}
}
}
}
}
Let's do a code breakdown.
The first thing that we need is the Inputs in our directive. We only actually need the search term, but I have added some extra functionalities to our directive. We can provide customClasses for the highlighted text, and another flag 'caseSensitive` which will decide whether we have to match the case.
@Input("highlight") searchTerm: string;
@Input() caseSensitive = false;
@Input() customClasses = "";
Next up we add a HostBinding ( ref ) which can be used to add value to a property on the host element.
@HostBinding("innerHtml")
content: string;
We bind to the innerHtml ( ref ) property of the host element. We can also do it in this way:
this.el.nativeElement.innerHtml = 'some text';
To get access to the host element, we inject ElementRef in the constructor, and also since we are going to be playing around with direct HTML manipulation, I have also injected DomSanitizer ( ref ) to sanitize the HTML before we inject it into the element.
So now we move on to the actual logic which we can write in the ngOnChanges ( ref ) lifecycle hook. So when our search term changes, we can update the highlights. The interesting part is:
const regex = new RegExp(this.searchTerm,this.caseSensitive ? "g" : "gi");
const newText = text.replace(regex, (match: string) => {
return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
});
const sanitzed = this.sanitizer.sanitize(
SecurityContext.HTML,
newText
);
this.content = sanitzed;
First, we set up the regex to help us find the matches. based on the caseSensitive condition we just add different Regex Flags:
We just wrap the matches with mark tag using the replace ( ref ) method on the string.
const newText = text.replace(regex, (match: string) => {
return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
});
After that the newText, which is a HTML string needs to be sanitized before we can bind it to the innerHTML. We use the sanitize ( ref ) method on the DomSanitizer class:
const sanitzed = this.sanitizer.sanitize(
SecurityContext.HTML,
newText
);
Now we just assign the sanitized value to our content property which gets added to the innerHTML via HostBinding.
This is how we can use it in our component. Make sure to import our HighlightModule to make our directive available for use in the component.
<p [highlight]="searchTerm" [caseSensitive]="true" customClasses="my-highlight-class">
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</p>
That's all! We've successfully created a very simple text highlighter in Angular using directives. As always, please don't directly reuse the code above, try to optimize it and you can always add or remove features to it.
CodeSandbox: https://codesandbox.io/s/ng-highlight-11hii
Do add your thoughts in the comments section. Stay Safe ❤️