angular, matInput and using a directive to highlight keywords

Question

Below is my directive for trying to highlight a keyword in a matInput.

import {Directive, Renderer2, OnInit, ElementRef} from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Directive({
  selector: '[appKeywordHighlight]'
})
export class KeywordHighlightDirective implements OnInit {

  constructor(private renderer: Renderer2,
              private elRef: ElementRef,
              private _sanitizer:DomSanitizer) { }

  ngOnInit() {
    console.log(this.elRef.nativeElement.value)
    this.renderer.setProperty(this.elRef.nativeElement,'value', "I am <span>very</span> happy");
  }

} //end class

In my input box this is what I get:

I am <span>very</span> happy

If not possible then ok but if possible then how do I highlight keywords? I will assing a class to the span to color.

<mat-form-field>
     <mat-label>keyword:</mat-label>
        <input matInput formControlName="keyword" appKeywordHighlight>
</mat-form-field>