Contents hide 1) How to create a library in Angular 12? 2) Making the library functional 3) Build a library and watch for changes 3.1) Build library 3.2) Run Application 4) Using a library in application 5) Free Course Publish Library to NPM repository 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 Note: –create-application=false: will don’t create the application folder just basic setup will be added. Once the setup is generated inside that angular setup will generate a library using Angular CLI command cd search-highlighter ./search-highlighter ng g library search-highlighter --prefix=gt Note: –prefix=gt: this will change your component prefix i.e <app-my-lib> to <gt-my-lib> Similarly will generate an application for a library example in which we will be using the library which we will be creating. ./search-highlighter 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. ./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’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. thinking… thinking… 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. –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 { 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>` ) ); } } Note: Make sure all the classes in the library are exposed through public-api.ts 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. ./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 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. –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 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. Best Way To Build And Publish Angular Library (v10) 01 – Generate an Angular Library 02 – Making Configurable Library Module 03 – Manage Angular Library Dependencies 04 – Use Configurable Angular Library Module 05 – Publish Angular Library To Local npm 06 – Publish Angular Library To Public NPM Repository Get More tutorials on Angular 12 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular, Angular Library, search highlighter