feat: add support for placeholders in ngxGlagolize

Author: alkorschun

projects/demo-app/public/languages/de.json

@@ -1,4 +1,5 @@
 {
   "test": "Test",
-  "test_test": ""
+  "test_test": "",
+  "greeting": "Hallo {{name}}!"
 }

projects/demo-app/src/app/app.component.html

@@ -1,2 +1,2 @@
 <div ngxGlagolize key="test" >test translation</div>
-<div ngxGlagolize key="test_test">test translation</div>
+<div ngxGlagolize key="greeting" [placeholder]="placeholderValues">test translation</div>

projects/demo-app/src/app/app.component.ts

@@ -9,10 +9,11 @@ import { NgxGlagolizeDirective, NgxGlagolizeService } from 'ngx-glagolize';
 })
 export class AppComponent {
   title = 'demo-app';
+  placeholderValues = { name: 'Mirko' };
 
   ngxGlagolizeService = inject(NgxGlagolizeService);
 
   constructor() {
-    this.ngxGlagolizeService.init('en');
+    this.ngxGlagolizeService.init('de');
   }
 }

projects/ngx-glagolize/src/lib/ngx-glagolize.directive.ts

@@ -10,18 +10,27 @@ export class NgxGlagolizeDirective {
   private elementRef = inject(ElementRef);
   key = input.required<string>();
   plural = input<boolean>();
+  placeholder = input<{ [key: string]: string}>();
 
   constructor() { 
     effect(() => {
       const translation  = this.ngxGlagolizeService.get(this.key());
       if(translation){
 
+        let translationString = '';
         if (typeof translation ===  'string') {
-          this.elementRef.nativeElement.innerHTML = translation;
+          translationString = translation;
         }else{
-          this.elementRef.nativeElement.innerHTML = this.plural() ? translation.other : translation.one;
+          translationString = this.plural() ? translation.other : translation.one;
+        }
+
+        if(this.placeholder()){
+          for (const key in this.placeholder()) {
+            translationString = translationString.replaceAll(`{{${key}}}`, this.placeholder()![key]);
+          }
         }
 
+        this.elementRef.nativeElement.innerHTML = translationString;
       }
 
     });