Create Library In Angular 12 – Search Highlighter

In this tutorial, we will see how to Create a Library In Angular 12. Search Highlighter is what we are going to create throughout this article. If you are not aware of what is an angular library – Basically library is created to use some piece of code or you can say functionality to various applications in short a reusable functionality/code.

How to create a library in Angular 12?

Let’s first setup up our project in different way, by default ng new project_name will create an angular application but as we are creating a library so will create both library and application for library example into a single angular folder structure.

ng new search-highlighter --create-application=false

Once the setup is generated inside that angular setup will generate a library using Angular CLI command

 cd search-highlighter

ng g library search-highlighter --prefix=gt

Similarly will generate an application for a library example in which we will be using the library which we will be creating.

ng g library search-highlighter-example

You will see under your set up a project folder will be created within that there will be two different folders search-highlighter and search-highlighter-example also with that you’re angular.json will be updated.

{
  ...
  "projects": {
    "search-highlighter-example": {
      "projectType": "application", // project type - application
      "schematics": {},
      "root": "projects/search-highlighter-example",
      "sourceRoot": "projects/search-highlighter-example/src",
      "prefix": "app",
      ...
    },
    "search-highlighter": {
      "projectType": "library", // project type - library
      "root": "projects/search-highlighter",
      "sourceRoot": "projects/search-highlighter/src",
      "prefix": "gt",  // custom prefix
      ...
    }
  },
  "defaultProject": "search-highlighter"
}

Making the library functional

let’s put some life in the library. As we will be highlighting the searched query, but before we start we have to think that how end-user will be using this library what inputs can we take from the user to make this library compactable with its application.

we will be accepting 2 parameters from the user:

• query: a sting type value the needs to be searched under the content.
• color: a color code that we will use to highlight the text.

<!-- ORIGINAL CONTENT : hide original and display highlighted in below one -->
<div #inputs [hidden]='true'>
  <ng-content></ng-content>
</div>

<!-- REPLACED CONTENT -->
<div class="gt-hl" [innerHtml]='replacedInputText'></div>

import { ElementRef, Input, OnChanges, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'gt-search-highlighter',
  templateUrl: './search-highlighter.component.html',
  styleUrls: ['./search-highlighter.component.css'],
})
export class SearchHighlighterComponent implements OnInit, OnChanges {
  
  public replacedInputText: SafeHtml | undefined;

  @Input() public color: string = 'yellow' as string; // default yellow color
  @Input() public query: string = '' as string;

  // refrence of original content
  @ViewChild('inputs', { static: true }) public inputs: ElementRef | undefined;

  constructor(private sanitizer: DomSanitizer) {}

  public ngOnInit(): void {
    // gets text from original content 
    this.replacedInputText = this.inputs?.nativeElement?.innerText;
  }

  /**
   * research on any changes in query/color
   */
  public ngOnChanges(): void {
    this.search();
  }

  public search(): void {
    // replacing the original content
    this.replacedInputText = this.sanitizer.bypassSecurityTrustHtml(
      this.inputs?.nativeElement?.innerText?.replace(
        new RegExp(this.query, 'g'),
        // Using Color Code
        `<span style="background-color:${this.color}">${this.query}</span>` 
      )
    );
  }
}  

Build a library and watch for changes

As libraries are bootstrapped and we cant ng-serve it all we can do is make changes in the library and rebuild again n again.
so to avoid that we can use the Angular CLI option i.e --watch, before that let’s make some script commands to run our application and build the library.

{
  "name": "search-highlighter",
  "version": "0.0.0",
  "scripts": {
    ...
    "app:start": "ng serve search-highlighter-example",
    "lib:build": "ng build search-highlighter --watch"
  },
  ...
}

Build library

npm run lib:build

before we run the application let’s make sure the library is properly compiled and build, also the --watch option will rebuild the library when the changes are made in files of the library.

Run Application

npm run app:start

The above command will serve the application on http://127.0.0.1:4200.
Once the library is compiled and build the files will be generated in the dist folder then we can use the library in our example application.

Using a library in application

Using our custom library would be too easy. Now first, we have to import the library to the module.

...
import { SearchHighlighterModule } from 'search-highlighter';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SearchHighlighterModule  // Imported Library
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And in HTML we can use the library component with different color inputs.

<!-- Input for searching words -->
<input type="text" value="" (change)='query = $event.target.value' />
<hr>
<gt-search-highlighter [query]='query' [color]="'pink'">
  section for content part one
</gt-search-highlighter>
<gt-search-highlighter [query]='query' [color]="'#ededed'">
  section for content part two  
</gt-search-highlighter>

Free Course Publish Library to NPM repository

To know how to publish the package to the npm repository we have a free advanced course on making configurable libraries and publishing them to the npm repository.