Changes from a directive stop being applied once the page is resized in Angular2

I have a component that brings user input from the database and displays it. We use the innerHTML attribute to set this information and a directive to process it beforehand. The directive in this case is called process-text. There are also other directives e.g line-clamp.

Example of component html:

<div class="container">
    <div process-text line-clamp (lineClampTriggered)="handle($event)" class="user-text" [innerHTML]="user.text"></div>
</div>

The directive wraps any anchor tags from the backend with span tags using the renderer. Note that this is not renderer2, I don't think this issue is related to the renderer class but I don't know.

section in process-text.directive:

ngAfterViewInit() {
    this.target = <HTMLElement>this.element.nativeElement;
    this.modifyData(this.target);

    wrappers = this.elementRef.nativeElement.querySelectorAll("wrap");
    wrappers.forEach(w => w.addEventListener("mouseover" () => {doSomething()})); //stops working
}

private modifyData(element: HTMLElement) { //recursively goes through child elements if present (e.g anchors)
    ...

    const ref = new ElementRef(element);

    if (this.isAnchorTag(element)) {
        this.renderer.setElementProperty(ref.nativeElement, 'outerHTML', 
            `<span class="wrap"><a href=${ref.nativeElement}>${ref.nativeElement.innerHTML}</a></span>`
    )}
    ...
}

Upon the page first loading the span wrappers are all there, however, if I adjust the page size by resizing the window or moving devtools for example, the span wrappers will all disappear. As if the directive wasn't applied and the achors are not wrapped. Additionally, any event listeners I've added from the directive will also no longer work. How can I prevent this?

Please note this only occurs in certain components and not others where this directive is used.