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
ng g library search-highlighter --prefix=gt
–Prefix = gt: It will change your component prefix, i.e.
Similarly we will create a sample library application where we will use the directory we will create.
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.
... "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.
"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.