Performance update (#13)

* removed after contentchecked

* added test

src/app/public/modules/text-highlight/text-highlight.directive.spec.ts

@@ -109,6 +109,21 @@ describe('Text Highlight', () => {
     });
   }));
 
+  it('should highlight on startup if search term is set in component', async(() => {
+    const expectedHtml =
+      getHtmlOutput('Here is some <mark class="sky-highlight-mark">test</mark> text.');
+
+    fixture = TestBed.createComponent(SkyTextHighlightTestComponent);
+    nativeElement = fixture.nativeElement as HTMLElement;
+    component = fixture.componentInstance;
+
+    component.searchTerm = 'test';
+    fixture.detectChanges();
+    containerEl = getContainerEl(fixture);
+
+    expect(containerEl.innerHTML.trim()).toBe(expectedHtml);
+  }));
+
   it('should highlight search term', async(() => {
     updateInputText(fixture, 'text');
 

src/app/public/modules/text-highlight/text-highlight.directive.ts

@@ -1,5 +1,4 @@
 import {
-  AfterContentChecked,
   AfterViewInit,
   Directive,
   ElementRef,
@@ -17,7 +16,7 @@ const className = 'sky-highlight-mark';
   selector: '[skyHighlight]'
 })
 export class SkyTextHighlightDirective
-  implements OnChanges, AfterViewInit, AfterContentChecked, OnDestroy {
+  implements OnChanges, AfterViewInit, OnDestroy {
 
   @Input()
   public skyHighlight: string = undefined;
@@ -103,10 +102,10 @@ export class SkyTextHighlightDirective
     });
 
     this.observeDom();
-  }
 
-  public ngAfterContentChecked(): void {
-    this.highlight();
+    if (this.skyHighlight) {
+      this.highlight();
+    }
   }
 
   public ngOnDestroy(): void {

src/app/visual/text-highlight/text-highlight-demo.component.html

@@ -1,3 +1,4 @@
+<input [(ngModel)]="normalSearchTerm" />
 <div class="sky-text-highlight-demo">
   <div
     [skyHighlight]="normalSearchTerm"