angular2 pipe and directive highlightterm is not working in IE11

Question

Hi am try to achieve to filter search term it should be highlight the text so i used first directive and now switched to pipe to test in IE11 browser below is the code.But below code is working in fine in chrome and firefox am not sure why am gettting this error in IE11.kindly help some one to over come this error am using angular2 2.2.3

highlight.pipe.ts:

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
    if (search && text) {
      let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');

      return text.replace(regex, (match) => `<span class="search-highlighterm">${match}</span>`);
    } else {
      return text;
    }
  }
} 

component:

@Component({
    selector: 'xxx',
    template:
    `
<span class="title" [innerHTML]="text | highlight: searchTerm">{{text}}'
)

or if i use directive like below

<span class="title" [highlight]="search" >{text}}

am getting error like below

- inline template:6:102 caused by: Invalid argument.
ORIGINAL EXCEPTION: Invalid argument.
ORIGINAL STACKTRACE:
Error: Invalid argument.
   at DomRenderer.prototype.setText (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:42348:67)
   at DebugDomRenderer.prototype.setText (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:71926:72)
   at View_xxxxx1.prototype.detectChangesInternal (Function code:326:5)
   at AppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73431:9)
   at DebugAppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73524:13)
   at ViewContainer.prototype.detectChangesInNestedViews (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73616:17)
   at View_xxxxx0.prototype.detectChangesInternal (Function code:114:3)
   at AppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73431:9)
   at DebugAppView.prototype.detectChanges (https://localhost:8080/vvv/js/webpack-bundles/vendor.bundle.js:73524:13)

Answer 1

As I cant see what was you try with Directive, here is my solution. I cant test it on IE cause I'm with Ubuntu.

@Directive({
  selector: '[highlight]'
})
class WrapBold implements OnInit {
  @Input('highlight') 
    public set search (val: string) {
      this._search = val;
      this.highlightText();
    }
    public get search () : string {
      return  this._search;
    }

  private originEl: HTMLElement;

  constructor(private el: ElementRef){
  }

  ngOnInit() {
    this.originEl = this.el.nativeElement.cloneNode(true);
    this.highlightText();
  }

  private highlightText () {
    if (this.search && this.originEl) {
      let pattern = this.search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');
      console.log(this.originEl); 
      return this.el.nativeElement.innerHTML = this.originEl.innerHTML.replace(regex, (match) => `<strong>${match}</strong>`);
    }
  }
}

Component

@Component({
  selector: 'my-app',
  template: `
    <div [highlight]="search">
      Hello Angular2
    </div>
  `
})
export class App {
  search = 'angu';

  constructor() {
    // change the search string after 3sec
    setTimeout(() => { this.search = 'angular'; }, 3000)
  }
}