First create this directive :

@Directive({
  selector: '[format-input]',
})

export class FormatDirective implements DoCheck {

  valueIsNull:boolean = true;

  constructor(public _elementRef: ElementRef<HTMLInputElement>,
    private _renderer: Renderer2) { }

  ngDoCheck(): void {

    setTimeout(() => {
      if(this.valueIsNull){
        this.format();
      }
    }, 150)

    fromEvent(this._elementRef.nativeElement, 'blur')
      .pipe(
        debounceTime(150),
        distinctUntilChanged(),
        tap(() => {
          this.format();
        })
      )
      .subscribe();
  }

  format(){
    this._elementRef.nativeElement.value = "{{ " + this._elementRef.nativeElement.value + " }}"
    this.valueIsNull = false;
  }
}

Then Import it to your module : e.g app.module :

@NgModule({
  declarations: [
    FormatDirective
  ],
  imports: [CommonModule],
  exports: [
    FormatDirective
  ]
})
export class AppModule { }

Then you can use it anywhere you want :

<input type="text" format-input />

You should use angular templating to achieve this Official Documentation for templating and interpolation and a code sample is given below. this will help you to achieve your usecase.

https://angular.io/guide/interpolation https://angular.io/api/forms/NgModel

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

Thanks

Rigin Oommen