Date:

Share:

Create Library In Angular 12 – Search Highlighter

Related Articles

In this tutorial, we will look at how to create a directory in Angular 12. Search highlights are what we are going to create throughout this article. If you are not aware of what an angular library is – in fact a library is created to use a piece of code or you can say functionality for different applications in short functionality / reusable code.

How to create a library in Angular 12?

Let’s first install our project in another way, by default ng new project_name You will create an angular app but as we create a directory so we will create both library and Implementation For example a library for building a single angular folder structure.

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

Once the setting is created within that angular setting you will create a directory using the Angular CLI command

 cd search-highlighter

./Search-highlighter

ng g library search-highlighter --prefix=gt
Note:
โ€“Prefix = gt: It will change your component prefix, i.e. <app-my-lib> To <gt-my-lib>

Similarly we will create a sample library application where we will use the directory we will create.

./Search-highlighter

ng g library search-highlighter-example

Look under your definition a project A folder will be created within it to have two different folders Highlights search and Search-highlights-example Even with that you are angular.json Will be updated.

./angular.json



  ...
  "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 women live a little in the library. As we will highlight the requested query, but before we begin we need to think about how the end user will use this directory, what inputs we can take from the user to make this directory compressible with its application.

Think … Think …

We will get 2 parameters from the user:

  • Query: A sting type value that should be searched for below the content.
  • Color: Color code that we will use to highlight the text.

โ€“Libโ€“ / src / lib / search-highlighter.component.html


<!-- 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>

โ€“Libโ€“ / src / lib / search-highlighter.component.ts


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  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   

Note: Make sure all classes in the library are exposed through public-api.ts

Build a library and watch the changes

Because libraries are diverse and we are unable to serve it all we can do is make changes to the library and rebuild again.
So to avoid this we can use the Angular CLI option i.e. --watch, Before that, let’s do some scripting commands to run our app and build the directory.

./package.json



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

Build a library

npm run lib:build

Before we run the application, let’s make sure the library is complex and properly constructed, too --watch option Rebuilds the directory when the changes are made to the directory files.

Launch the app

npm run app:start

The above command will serve the application in http://127.0.0.1:4200.
After compiling and building the directory the files will be generated in the dist folder so we can use the directory in our sample application.

Using the library in the app

Using our custom library will be too easy. Now first, we need to import the library into a module.

โ€“Appโ€“ / src / app / app.module.ts


...
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.

โ€“Appโ€“ / src / app / app.component.html


<!-- 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 advertising library for NPM database

To know how to publish the package to the npm database we have a free advanced course for making definable libraries and publishing them in the npm database.

The best way to build and publish an angular library (v10)
Get more guides on Angular 12

  • Source

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    Popular Articles