chore(text-highlight): update with service

Author: Lipata

src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { Component, ViewChild } from '@angular/core';
-import { IgxTextHighlightDirective } from 'igniteui-angular';
+import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-1',
@@ -26,6 +26,8 @@ export class TextHighlightSample1Component {
     public caseSensitive = false;
     public index = 0;
 
+    constructor(private highlightService: IgxTextHighlightService) { }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
@@ -74,7 +76,7 @@ export class TextHighlightSample1Component {
             this.index = this.index > this.matchCount - 1 ? 0 : this.index;
 
             if (this.matchCount) {
-                IgxTextHighlightDirective.setActiveHighlight('group1', {
+                this.highlightService.setActiveHighlight('group1', {
                     index: this.index
                 });
             }

src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { Component, ViewChildren } from '@angular/core';
-import { IgxTextHighlightDirective } from 'igniteui-angular';
+import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-2',
@@ -32,6 +32,8 @@ export class TextHighlightSample2Component {
     public caseSensitive = false;
     public index = 0;
 
+    constructor(private highlightService: IgxTextHighlightService) { }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
@@ -98,7 +100,7 @@ export class TextHighlightSample2Component {
 
                 const actualIndex = row === 0 ? this.index : this.index - matchesArray[row - 1];
 
-                IgxTextHighlightDirective.setActiveHighlight('group1', { index: actualIndex, row });
+                this.highlightService.setActiveHighlight('group1', { index: actualIndex, row });
             }
         } else {
             this.highlights.forEach((h) => {

src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { Component, ViewChild } from '@angular/core';
-import { IgxTextHighlightDirective } from 'igniteui-angular';
+import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-style',
@@ -25,6 +25,8 @@ export class TextHighlightStyleComponent {
     public caseSensitive = false;
     public index = 0;
 
+    constructor(private highlightService: IgxTextHighlightService) { }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
@@ -73,7 +75,7 @@ export class TextHighlightStyleComponent {
             this.index = this.index > this.matchCount - 1 ? 0 : this.index;
 
             if (this.matchCount) {
-                IgxTextHighlightDirective.setActiveHighlight('group1', {
+                this.highlightService.setActiveHighlight('group1', {
                     index: this.index
                 });
             }