I'm looking for a solution to change the value of all strings in my application similar to an internationalization/localization.
My strings follow a specific pattern like this:
let sample = "[someID]"
Then i use the string like this:
<h5>Sample:</h5>
<h5>{{sample}}</h5>
And the result should look like this:
Sample:
Result for the ID
Possible solutions might be to tag the string with some special character similar to the localization in Angular with "$localize", but followed by a custom function to find the correct value for the given ID.
I tried to manipulate primitive string type but as far as I know there is no way to change the default getter for the string type. The only way is to extend the String Prototype by a custom function but then the usage would look like this:
<h5>Sample:</h5>
<h5>{{sample.customMethod()}}</h5>
This would result in a lot of work because I need to change all currently used string properties in this way.
Maybe there is some sort of way to change the value of the string while it's being compiled or something. Like getting/setting a display value or applying some sort of filter globally.
Have you considered using a BehaviourSubject in a service? That way you could cast the updated value to all the application via a .next('newValue')
myService.ts:
globalSample:BehaviourSubject = new BehaviourSubject<string>('default')
globalSample$ = globalSample.asObservable();
updateSample(newValue:string){
this.globalSample.next(newValue);
}
The sample variable instead of a string would be an Observable and you could use it in the template with an async pipe just like:
component.ts:
export class myComponent {
sample:Observable<string> = myService.globalSample$
constructor(myService:MyService){}
}
component.html:
<h5>Sample:</h5>
<h5>{{sample | async }}</h5>