Angular Directive Restore Original HTML

Question

I'm new to angular so I am not sure what I am doing wrong. I am attempting to create a droppable file upload form.

When the user is hovering over the form, I want it to say something like "drop your files", if they do not drop anything and dragleave, I wanted to restore what was in the form previously.

I have the innertext swapping out while they are dragging but the content is not reverting back to the original upon leaving.

This is my directive

import { Directive, HostListener, HostBinding, Output, EventEmitter, ElementRef } from 
'@angular/core';
import { MatButton } from '@angular/material/button';

@Directive({
    selector: '[appFileDragNDrop]'
})

export class FileDragNDropDirective {

constructor(private elm: ElementRef,) {
    this.FormState = elm.nativeElement.innerHTML;
    this.HostElm = this.elm.nativeElement;
}

private HostElm: ElementRef;
private FormState: ElementRef;

@Output() private filesChangeEmiter : EventEmitter<File[]> = new EventEmitter();

@HostBinding('style.outline') private outline = '3px dashed #929292';
@HostBinding('style.outline-offset') private outline_offset = '-10px';



@HostListener('dragover', ['$event']) public onDragOver( evt: MouseEvent){
    evt.preventDefault();
    evt.stopPropagation();
    this.outline = '5px solid #929292';
    this.outline_offset = "0px";

    this.elm.nativeElement.innerText = "<div>Drop it like its hot<div>";
}

@HostListener('dragleave', ['$event']) public onDragLeave(evt: MouseEvent){
    evt.preventDefault();
    evt.stopPropagation();
    this.outline = '3px dashed #929292';
    this.outline_offset = "-10px";

    this.elm.nativeElement.innerHTML = this.FormState;
    
}

@HostListener('drop', ['$event']) public onDrop(evt: MouseEvent){
    evt.preventDefault();
    evt.stopPropagation();

}

}

Any help is appreciated.