├── .browserslistrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── angular.json
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── directives
    │   │   └── highlight.directive.ts
    │   └── pipes
    │   │   └── filter.pipe.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.scss
    └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.angular/cache
36 | /.sass-cache
37 | /connect.lock
38 | /coverage
39 | /libpeerconnection.log
40 | npm-debug.log
41 | yarn-error.log
42 | testem.log
43 | /typings
44 | 
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Idris Rampurawala
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular Text Search with Highlight
 2 | [![The MIT License](https://img.shields.io/badge/license-MIT-orange.svg?style=flat-square)](LICENSE)
 3 | 
 4 | > This project is a demonstration of implementing a text filter with highlighting in Angular
 5 | 
 6 | You can find an in-depth article on this implementation [here](https://dev.to/idrisrampurawala/creating-a-search-filter-in-angular-562d).
 7 | 
 8 | ## Installation
 9 | 
10 | This project runs with [Angular CLI](https://github.com/angular/angular-cli) version 14 or higher.
11 | 
12 | - Clone the repository `git clone <repo-name>`
13 | - Install dependencies via `npm i`
14 | - Run the code via [angular cli](https://cli.angular.io/) `ng serve`. Navigate to `http://localhost:4200/` to see it in action
15 | 
16 | ## License
17 | 
18 | This program is free software under MIT license. Please see the [LICENSE](LICENSE) file in our repository for the full text.


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-text-search-highlight": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               "src/styles.scss"
 31 |             ],
 32 |             "scripts": [],
 33 |             "vendorChunk": true,
 34 |             "extractLicenses": false,
 35 |             "buildOptimizer": false,
 36 |             "sourceMap": true,
 37 |             "optimization": false,
 38 |             "namedChunks": true
 39 |           },
 40 |           "configurations": {
 41 |             "production": {
 42 |               "fileReplacements": [
 43 |                 {
 44 |                   "replace": "src/environments/environment.ts",
 45 |                   "with": "src/environments/environment.prod.ts"
 46 |                 }
 47 |               ],
 48 |               "optimization": true,
 49 |               "outputHashing": "all",
 50 |               "sourceMap": false,
 51 |               "namedChunks": false,
 52 |               "extractLicenses": true,
 53 |               "vendorChunk": false,
 54 |               "buildOptimizer": true,
 55 |               "budgets": [
 56 |                 {
 57 |                   "type": "initial",
 58 |                   "maximumWarning": "2mb",
 59 |                   "maximumError": "5mb"
 60 |                 },
 61 |                 {
 62 |                   "type": "anyComponentStyle",
 63 |                   "maximumWarning": "6kb",
 64 |                   "maximumError": "10kb"
 65 |                 }
 66 |               ]
 67 |             }
 68 |           },
 69 |           "defaultConfiguration": ""
 70 |         },
 71 |         "serve": {
 72 |           "builder": "@angular-devkit/build-angular:dev-server",
 73 |           "options": {
 74 |             "browserTarget": "angular-text-search-highlight:build"
 75 |           },
 76 |           "configurations": {
 77 |             "production": {
 78 |               "browserTarget": "angular-text-search-highlight:build:production"
 79 |             }
 80 |           }
 81 |         },
 82 |         "extract-i18n": {
 83 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 84 |           "options": {
 85 |             "browserTarget": "angular-text-search-highlight:build"
 86 |           }
 87 |         },
 88 |         "test": {
 89 |           "builder": "@angular-devkit/build-angular:karma",
 90 |           "options": {
 91 |             "main": "src/test.ts",
 92 |             "polyfills": "src/polyfills.ts",
 93 |             "tsConfig": "tsconfig.spec.json",
 94 |             "karmaConfig": "karma.conf.js",
 95 |             "assets": [
 96 |               "src/favicon.ico",
 97 |               "src/assets"
 98 |             ],
 99 |             "styles": [
100 |               "src/styles.scss"
101 |             ],
102 |             "scripts": []
103 |           }
104 |         },
105 |         "e2e": {
106 |           "builder": "@angular-devkit/build-angular:protractor",
107 |           "options": {
108 |             "protractorConfig": "e2e/protractor.conf.js",
109 |             "devServerTarget": "angular-text-search-highlight:serve"
110 |           },
111 |           "configurations": {
112 |             "production": {
113 |               "devServerTarget": "angular-text-search-highlight:serve:production"
114 |             }
115 |           }
116 |         }
117 |       }
118 |     }
119 |   }
120 | }


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('angular-text-search-highlight app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es2018",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, './coverage/angular-text-search-highlight'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-text-search-highlight",
 3 |   "version": "1.0.0",
 4 |   "description": "Demonstration of a text search with highlighting in Angular 8",
 5 |   "author": {
 6 |     "name": "Idris Rampurawala",
 7 |     "url": "https://github.com/idris-rampurawala",
 8 |     "github": "https://github.com/idris-rampurawala",
 9 |     "twitter": "https://twitter.com/idRampurawala"
10 |   },
11 |   "contributors": [
12 |     {
13 |       "name": "Idris Rampurawala",
14 |       "url": "https://github.com/idris-rampurawala"
15 |     }
16 |   ],
17 |   "license": "MIT",
18 |   "scripts": {
19 |     "ng": "ng",
20 |     "start": "ng serve",
21 |     "build": "ng build",
22 |     "test": "ng test",
23 |     "lint": "ng lint",
24 |     "e2e": "ng e2e"
25 |   },
26 |   "private": true,
27 |   "dependencies": {
28 |     "@angular/animations": "^14.2.12",
29 |     "@angular/common": "^14.2.12",
30 |     "@angular/compiler": "^14.2.12",
31 |     "@angular/core": "^14.2.12",
32 |     "@angular/forms": "^14.2.12",
33 |     "@angular/platform-browser": "^14.2.12",
34 |     "@angular/platform-browser-dynamic": "^14.2.12",
35 |     "@angular/router": "^14.2.12",
36 |     "rxjs": "~6.6.7",
37 |     "tslib": "^2.0.0",
38 |     "zone.js": "~0.11.4"
39 |   },
40 |   "devDependencies": {
41 |     "@angular-devkit/build-angular": "^14.2.10",
42 |     "@angular/cli": "^14.2.10",
43 |     "@angular/compiler-cli": "^14.2.12",
44 |     "@angular/language-service": "^14.2.12",
45 |     "@types/jasmine": "~3.8.0",
46 |     "@types/jasminewd2": "~2.0.3",
47 |     "@types/node": "^12.11.1",
48 |     "codelyzer": "^6.0.0",
49 |     "jasmine-core": "~3.8.0",
50 |     "jasmine-spec-reporter": "~5.0.0",
51 |     "karma": "~6.3.16",
52 |     "karma-chrome-launcher": "~3.1.0",
53 |     "karma-coverage-istanbul-reporter": "~3.0.2",
54 |     "karma-jasmine": "~4.0.0",
55 |     "karma-jasmine-html-reporter": "^1.6.0",
56 |     "protractor": "~7.0.0",
57 |     "ts-node": "~7.0.0",
58 |     "tslint": "~6.1.0",
59 |     "typescript": "~4.6.4"
60 |   }
61 | }


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="content" role="main">
 2 |   <div class="card">
 3 |     <div class="form-group">
 4 |       <label for="search-text">Search Text</label>
 5 |       <input type="email" class="form-control" id="search-text" aria-describedby="search-text" [(ngModel)]="searchText"
 6 |         placeholder="Enter text to search" autofocus>
 7 |     </div>
 8 |     <ul class="list-group list-group-flush">
 9 |       <li class="list-group-item" *ngFor="let c of characters | appFilter: searchText" appHighlight
10 |         [searchedWord]="searchText" [content]="c" [classToApply]="'font-weight-bold'" [setTitle]="'true'">
11 |         {{c}}
12 |       </li>
13 |     </ul>
14 |   </div>
15 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .content {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 | }
 6 | .card {
 7 |   padding: 1.5rem;
 8 |   border-width: 0.2rem;
 9 |   border: solid #f8f9fa;
10 |   position: relative;
11 |   margin: 1rem 1rem;
12 |   min-width: 500px;
13 | }
14 | .form-group {
15 |   margin-bottom: 1rem;
16 |   label {
17 |     display: inline-block;
18 |     margin-bottom: 0.5rem;
19 |   }
20 |   .form-control {
21 |     display: block;
22 |     width: -webkit-fill-available;
23 |     height: calc(1em + 0.75rem);
24 |     padding: 0.375rem 0.75rem;
25 |     font-size: 1rem;
26 |     font-weight: 400;
27 |     line-height: 1.5;
28 |     color: #495057;
29 |     background-color: #fff;
30 |     background-clip: padding-box;
31 |     border: 1px solid #ced4da;
32 |     border-radius: 0.25rem;
33 |     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
34 |     input {
35 |       margin: 0;
36 |       font-family: inherit;
37 |       overflow: visible;
38 |       letter-spacing: normal;
39 |       word-spacing: normal;
40 |       text-transform: none;
41 |       text-indent: 0px;
42 |       text-shadow: none;
43 |       text-align: start;
44 |       -webkit-appearance: textfield;
45 |       cursor: text;
46 |     }
47 |   }
48 | }
49 | .list-group {
50 |   display: flex;
51 |   -ms-flex-direction: column;
52 |   flex-direction: column;
53 |   padding-left: 0;
54 |   margin-bottom: 0;
55 |   .list-group-item {
56 |     position: relative;
57 |     display: block;
58 |     padding: 0.75rem 1.25rem;
59 |     background-color: #fff;
60 |     border: 1px solid rgba(0, 0, 0, 0.125);
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, waitForAsync } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(waitForAsync(() => {
 6 |     TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         AppComponent
 9 |       ],
10 |     }).compileComponents();
11 |   }));
12 | 
13 |   it('should create the app', () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.debugElement.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'angular-text-search-highlight'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.debugElement.componentInstance;
22 |     expect(app.title).toEqual('angular-text-search-highlight');
23 |   });
24 | 
25 |   it('should render title', () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.debugElement.nativeElement;
29 |     expect(compiled.querySelector('.content span').textContent).toContain('angular-text-search-highlight app is running!');
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'angular-text-search-highlight';
10 |   searchText = '';
11 |   characters = [
12 |     'Ant-Man',
13 |     'Aquaman',
14 |     'Asterix',
15 |     'The Atom',
16 |     'The Avengers',
17 |     'Batgirl',
18 |     'Batman',
19 |     'Batwoman',
20 |     'Black Canary',
21 |     'Black Panther',
22 |     'Captain America',
23 |     'Captain Marvel',
24 |     'Catwoman',
25 |     'Conan the Barbarian',
26 |     'Daredevil',
27 |     'The Defenders',
28 |     'Doc Savage',
29 |     'Doctor Strange',
30 |     'Elektra',
31 |     'Fantastic Four',
32 |     'Ghost Rider',
33 |     'Green Arrow',
34 |     'Green Lantern',
35 |     'Guardians of the Galaxy',
36 |     'Hawkeye',
37 |     'Hellboy',
38 |     'Incredible Hulk',
39 |     'Iron Fist',
40 |     'Iron Man',
41 |     'Marvelman',
42 |     'Robin',
43 |     'The Rocketeer',
44 |     'The Shadow',
45 |     'Spider-Man',
46 |     'Sub-Mariner',
47 |     'Supergirl',
48 |     'Superman',
49 |     'Teenage Mutant Ninja Turtles',
50 |     'Thor',
51 |     'The Wasp',
52 |     'Watchmen',
53 |     'Wolverine',
54 |     'Wonder Woman',
55 |     'X-Men',
56 |     'Zatanna',
57 |     'Zatara',
58 |   ];
59 | }
60 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FormsModule } from '@angular/forms';
 4 | 
 5 | import { AppComponent } from './app.component';
 6 | 
 7 | import { HighlightDirective } from './directives/highlight.directive';
 8 | import { FilterPipe } from './pipes/filter.pipe';
 9 | 
10 | @NgModule({
11 |   declarations: [
12 |     AppComponent,
13 |     HighlightDirective,
14 |     FilterPipe
15 |   ],
16 |   imports: [
17 |     BrowserModule,
18 |     FormsModule
19 |   ],
20 |   providers: [],
21 |   bootstrap: [AppComponent]
22 | })
23 | export class AppModule { }
24 | 


--------------------------------------------------------------------------------
/src/app/directives/highlight.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, Input, SimpleChanges, Renderer2, ElementRef, OnChanges } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[appHighlight]'
 5 | })
 6 | export class HighlightDirective implements OnChanges {
 7 |   @Input() searchedWord: string;
 8 |   @Input() content: string;
 9 |   @Input() classToApply: string;
10 |   @Input() setTitle = false;
11 | 
12 |   constructor(private el: ElementRef, private renderer: Renderer2) { }
13 | 
14 |   ngOnChanges(changes: SimpleChanges): void {
15 |     if (!this.content) {
16 |       return;
17 |     }
18 | 
19 |     if (this.setTitle) {
20 |       this.renderer.setProperty(
21 |         this.el.nativeElement,
22 |         'title',
23 |         this.content
24 |       );
25 |     }
26 | 
27 |     if (!this.searchedWord || !this.searchedWord.length || !this.classToApply) {
28 |       this.renderer.setProperty(this.el.nativeElement, 'innerHTML', this.content);
29 |       return;
30 |     }
31 | 
32 |     this.renderer.setProperty(
33 |       this.el.nativeElement,
34 |       'innerHTML',
35 |       this.getFormattedText()
36 |     );
37 |   }
38 | 
39 |   getFormattedText() {
40 |     const re = new RegExp(`(${this.searchedWord})`, 'gi');
41 |     return this.content.replace(re, `<span class="${this.classToApply}">$1</span>`);
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/app/pipes/filter.pipe.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({ name: 'appFilter' })
 4 | export class FilterPipe implements PipeTransform {
 5 |   /**
 6 |    * Pipe filters the list of elements based on the search text provided
 7 |    *
 8 |    * @param items list of elements to search in
 9 |    * @param searchText search string
10 |    * @returns list of elements filtered by search text or []
11 |    */
12 |   transform(items: any[], searchText: string): any[] {
13 |     if (!items) {
14 |       return [];
15 |     }
16 |     if (!searchText) {
17 |       return items;
18 |     }
19 |     searchText = searchText.toLocaleLowerCase();
20 | 
21 |     return items.filter(it => {
22 |       return it.toLocaleLowerCase().includes(searchText);
23 |     });
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/idris-rampurawala/angular-text-search-highlight/7a77c31c1be8deb46c47b9c3639ff88be3fcb274/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/idris-rampurawala/angular-text-search-highlight/7a77c31c1be8deb46c47b9c3639ff88be3fcb274/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Angular Text Search with Highlight By Idris Rampurawala</title>
 7 |   <base href="/">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | 
11 |   <meta name="description" content="Demonstration of a text search with highlighting in Angular 8">
12 |   <!-- og related tags -->
13 |   <meta property="og:title" content="Demonstration of a text search with highlighting in Angular 8">
14 |   <meta property="og:description"
15 |     content="Demonstration of a text search with highlighting using pipe and directive in Angular 8">
16 |   <meta property="og:image"
17 |     content="https://res.cloudinary.com/idr/image/upload/q_auto,f_auto/dev.to/angular-text-search/angular-text-search_rvzzib.gif" />
18 |   <meta property="og:image:secure_url"
19 |     content="https://res.cloudinary.com/idr/image/upload/q_auto,f_auto/dev.to/angular-text-search/angular-text-search_rvzzib.gif" />
20 | </head>
21 | 
22 | <body>
23 |   <app-root></app-root>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * By default, zone.js will patch all possible macroTask and DomEvents
23 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
24 |  * because those flags need to be set before `zone.js` being loaded, and webpack
25 |  * will put import in the top of bundle, so user need to create a separate file
26 |  * in this directory (for example: zone-flags.ts), and put the following flags
27 |  * into that file, and then add the following code before importing zone.js.
28 |  * import './zone-flags.ts';
29 |  *
30 |  * The flags allowed in zone-flags.ts are listed here.
31 |  *
32 |  * The following flags will work for all browsers.
33 |  *
34 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 |  *
38 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
40 |  *
41 |  *  (window as any).__Zone_enable_cross_context_check = true;
42 |  *
43 |  */
44 | 
45 | /***************************************************************************************************
46 |  * Zone JS is required by default for Angular itself.
47 |  */
48 | import 'zone.js';  // Included with Angular CLI.
49 | 
50 | 
51 | /***************************************************************************************************
52 |  * APPLICATION IMPORTS
53 |  */
54 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | html {
 3 |   font-family: sans-serif;
 4 |   line-height: 1.15;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
10 |     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
11 |   font-size: 1rem;
12 |   font-weight: 400;
13 |   line-height: 1.5;
14 |   color: #212529;
15 |   text-align: left;
16 |   background-color: #fff;
17 | }
18 | .font-weight-bold {
19 |   font-weight: 700 !important;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting(), {
16 |     teardown: { destroyAfterEach: false }
17 | }
18 | );
19 | // Then we find all the tests.
20 | const context = require.context('./', true, /\.spec\.ts$/);
21 | // And load the modules.
22 | context.keys().map(context);
23 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ],
14 |   "exclude": [
15 |     "src/test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "src",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "es2020",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2020",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   },
22 |   "angularCompilerOptions": {
23 |     "fullTemplateTypeCheck": true,
24 |     "strictInjectionParameters": true
25 |   }
26 | }


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rules": {
  4 |     "align": {
  5 |       "options": [
  6 |         "parameters",
  7 |         "statements"
  8 |       ]
  9 |     },
 10 |     "array-type": false,
 11 |     "arrow-parens": false,
 12 |     "arrow-return-shorthand": true,
 13 |     "deprecation": {
 14 |       "severity": "warning"
 15 |     },
 16 |     "component-class-suffix": true,
 17 |     "contextual-lifecycle": true,
 18 |     "curly": true,
 19 |     "directive-class-suffix": true,
 20 |     "directive-selector": [
 21 |       true,
 22 |       "attribute",
 23 |       "app",
 24 |       "camelCase"
 25 |     ],
 26 |     "component-selector": [
 27 |       true,
 28 |       "element",
 29 |       "app",
 30 |       "kebab-case"
 31 |     ],
 32 |     "eofline": true,
 33 |     "import-blacklist": [
 34 |       true,
 35 |       "rxjs/Rx"
 36 |     ],
 37 |     "import-spacing": true,
 38 |     "indent": {
 39 |       "options": [
 40 |         "spaces"
 41 |       ]
 42 |     },
 43 |     "interface-name": false,
 44 |     "max-classes-per-file": false,
 45 |     "max-line-length": [
 46 |       true,
 47 |       140
 48 |     ],
 49 |     "member-access": false,
 50 |     "member-ordering": [
 51 |       true,
 52 |       {
 53 |         "order": [
 54 |           "static-field",
 55 |           "instance-field",
 56 |           "static-method",
 57 |           "instance-method"
 58 |         ]
 59 |       }
 60 |     ],
 61 |     "no-consecutive-blank-lines": false,
 62 |     "no-console": [
 63 |       true,
 64 |       "debug",
 65 |       "info",
 66 |       "time",
 67 |       "timeEnd",
 68 |       "trace"
 69 |     ],
 70 |     "no-empty": false,
 71 |     "no-inferrable-types": [
 72 |       true,
 73 |       "ignore-params"
 74 |     ],
 75 |     "no-non-null-assertion": true,
 76 |     "no-redundant-jsdoc": true,
 77 |     "no-switch-case-fall-through": true,
 78 |     "no-var-requires": false,
 79 |     "object-literal-key-quotes": [
 80 |       true,
 81 |       "as-needed"
 82 |     ],
 83 |     "object-literal-sort-keys": false,
 84 |     "ordered-imports": false,
 85 |     "quotemark": [
 86 |       true,
 87 |       "single"
 88 |     ],
 89 |     "trailing-comma": false,
 90 |     "no-conflicting-lifecycle": true,
 91 |     "no-host-metadata-property": true,
 92 |     "no-input-rename": true,
 93 |     "no-inputs-metadata-property": true,
 94 |     "no-output-native": true,
 95 |     "no-output-on-prefix": true,
 96 |     "no-output-rename": true,
 97 |     "semicolon": {
 98 |       "options": [
 99 |         "always"
100 |       ]
101 |     },
102 |     "space-before-function-paren": {
103 |       "options": {
104 |         "anonymous": "never",
105 |         "asyncArrow": "always",
106 |         "constructor": "never",
107 |         "method": "never",
108 |         "named": "never"
109 |       }
110 |     },
111 |     "no-outputs-metadata-property": true,
112 |     "template-banana-in-box": true,
113 |     "template-no-negated-async": true,
114 |     "typedef-whitespace": {
115 |       "options": [
116 |         {
117 |           "call-signature": "nospace",
118 |           "index-signature": "nospace",
119 |           "parameter": "nospace",
120 |           "property-declaration": "nospace",
121 |           "variable-declaration": "nospace"
122 |         },
123 |         {
124 |           "call-signature": "onespace",
125 |           "index-signature": "onespace",
126 |           "parameter": "onespace",
127 |           "property-declaration": "onespace",
128 |           "variable-declaration": "onespace"
129 |         }
130 |       ]
131 |     },
132 |     "use-lifecycle-interface": true,
133 |     "use-pipe-transform-interface": true,
134 |     "variable-name": {
135 |       "options": [
136 |         "ban-keywords",
137 |         "check-format",
138 |         "allow-pascal-case"
139 |       ]
140 |     },
141 |     "whitespace": {
142 |       "options": [
143 |         "check-branch",
144 |         "check-decl",
145 |         "check-operator",
146 |         "check-separator",
147 |         "check-type",
148 |         "check-typecast"
149 |       ]
150 |     }
151 |   },
152 |   "rulesDirectory": [
153 |     "codelyzer"
154 |   ]
155 | }


--------------------------------------------------------------------------------