Primero crea esta directiva:

 @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; } }

Luego impórtelo a su módulo: por ejemplo, app.module:

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

Entonces puedes usarlo donde quieras:

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

Debe usar plantillas angulares para lograr esta Documentación oficial para plantillas e interpolación, y a continuación se proporciona un ejemplo de código. esto le ayudará a lograr su caso de uso.

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 } }

Gracias

Equipo Rigin