feat(text-highlight): adding destroy logic for samples

Author: Konstantin Dinev

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

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChild } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-1',
     styleUrls: ['./text-highlight-sample-1.component.scss'],
     templateUrl: './text-highlight-sample-1.component.html'
 })
-export class TextHighlightSample1Component {
+export class TextHighlightSample1Component implements OnDestroy {
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
     public highlight: IgxTextHighlightDirective;
     // tslint:disable max-line-length
@@ -28,6 +28,10 @@ export class TextHighlightSample1Component {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {

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

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, ViewChildren } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-2',
     styleUrls: ['./text-highlight-sample-2.component.scss'],
     templateUrl: './text-highlight-sample-2.component.html'
 })
-export class TextHighlightSample2Component {
+export class TextHighlightSample2Component implements OnDestroy {
     @ViewChildren(IgxTextHighlightDirective)
     public highlights;
     // tslint:disable max-line-length
@@ -34,6 +34,10 @@ export class TextHighlightSample2Component {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {

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

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChild } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-style',
     styleUrls: ['./text-highlight-style.component.scss'],
     templateUrl: './text-highlight-style.component.html'
 })
-export class TextHighlightStyleComponent {
+export class TextHighlightStyleComponent implements OnDestroy {
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
     public highlight: IgxTextHighlightDirective;
 
@@ -27,6 +27,10 @@ export class TextHighlightStyleComponent {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {