From 5a38d14f1c7356246eacd22147fc587b30c71425 Mon Sep 17 00:00:00 2001
From: illfixit <66363651+illfixit@users.noreply.github.com>
Date: Thu, 26 Sep 2024 14:34:59 +0200
Subject: [PATCH] chore: refactor string interpolation to binding

---
 .../asset-create-dialog.component.html        | 102 ++++-----
 ...t-agreement-transfer-dialog.component.html |   4 +-
 .../dashboard-page.component.html             |  14 +-
 .../edit-asset-form.component.html            | 204 ++++++++----------
 ...timespan-restriction-dialog.component.html |   4 +-
 .../translate-with-slot.component.html        |   6 +-
 .../translate-with-slot.component.ts          |   4 +
 src/assets/i18n/en.json                       |   6 +-
 8 files changed, 169 insertions(+), 175 deletions(-)

diff --git a/src/app/routes/connector-ui/asset-list-page/asset-create-dialog/asset-create-dialog.component.html b/src/app/routes/connector-ui/asset-list-page/asset-create-dialog/asset-create-dialog.component.html
index 665dd691..fbd3ec86 100644
--- a/src/app/routes/connector-ui/asset-list-page/asset-create-dialog/asset-create-dialog.component.html
+++ b/src/app/routes/connector-ui/asset-list-page/asset-create-dialog/asset-create-dialog.component.html
@@ -17,17 +17,17 @@ <h1 mat-dialog-title>
               <input
                 matInput
                 autocomplete="new-name"
-                placeholder="{{
+                [placeholder]="
                   'create_data_offer_page.title_placeholder' | translate
-                }}"
+                "
                 [formControl]="form.metadata.controls.title" />
               <button
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.title_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -46,9 +46,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.version_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -70,9 +70,9 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.asset_id_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
             <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
@@ -157,10 +157,10 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.endpoint_documentation_tooltip'
                   | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
             <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
@@ -181,9 +181,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.publisher_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
               <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
@@ -203,9 +203,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.standard_license_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
               <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
@@ -255,9 +255,9 @@ <h1 mat-dialog-title>
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.data_model_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </mat-form-field>
@@ -266,7 +266,7 @@ <h1 mat-dialog-title>
             <!-- Transport Mode -->
             <transport-mode-select
               class="grow"
-              label="{{ 'create_data_offer_page.transport_mode' | translate }}"
+              [label]="'create_data_offer_page.transport_mode' | translate"
               [control]="
                 form.advanced.controls.transportMode
               "></transport-mode-select>
@@ -284,9 +284,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.geo_reference_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -299,17 +299,17 @@ <h1 mat-dialog-title>
             }}</mat-label>
             <input
               matInput
-              placeholder="{{
+              [placeholder]="
                 'create_data_offer_page.sovereign_placeholder' | translate
-              }}"
+              "
               [formControl]="form.advanced.controls.sovereignLegalName" />
             <button
               class="!scale-[0.9]"
               mat-icon-button
               matSuffix
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.sovereign_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </mat-form-field>
@@ -322,19 +322,19 @@ <h1 mat-dialog-title>
               }}</mat-label>
               <input
                 matInput
-                placeholder="{{
+                [placeholder]="
                   'create_data_offer_page.data_update_frequency_placeholder'
                     | translate
-                }}"
+                "
                 [formControl]="form.advanced.controls.dataUpdateFrequency" />
               <button
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.data_update_frequency_tooltip'
                     | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -352,9 +352,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.geo_location_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -370,9 +370,9 @@ <h1 mat-dialog-title>
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.nuts_locations_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </div>
@@ -417,9 +417,9 @@ <h1 mat-dialog-title>
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.data_samples_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </div>
@@ -466,9 +466,9 @@ <h1 mat-dialog-title>
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.reference_files_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </div>
@@ -544,15 +544,15 @@ <h1 mat-dialog-title>
               <input
                 matStartDate
                 formControlName="from"
-                placeholder="{{
+                [placeholder]="
                   'create_data_offer_page.start_date' | translate
-                }}" />
+                " />
               <input
                 matEndDate
                 formControlName="toInclusive"
-                placeholder="{{
-                  'create_data_offer_page.end-date-inclusive' | translate
-                }}" />
+                [placeholder]="
+                  'create_data_offer_page.end_date_inclusive' | translate
+                " />
             </mat-date-range-input>
             <mat-hint
               >{{ 'create_data_offer_page.temporal_coverage_hint' | translate }}
@@ -574,10 +574,10 @@ <h1 mat-dialog-title>
             <textarea
               class="h-28"
               matInput
-              placeholder="{{
+              [placeholder]="
                 'create_data_offer_page.conditions_for_use_placeholder'
                   | translate
-              }}"
+              "
               [formControl]="
                 form.advanced.controls.conditionsForUse
               "></textarea>
@@ -656,9 +656,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.contact_email_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
               <mat-error *ngIf="ctrl.invalid && ctrl.errors?.email">
@@ -688,9 +688,9 @@ <h1 mat-dialog-title>
                 class="!scale-[0.9]"
                 mat-icon-button
                 matSuffix
-                matTooltip="{{
+                [matTooltip]="
                   'create_data_offer_page.email_subject_tooltip' | translate
-                }}">
+                ">
                 <mat-icon>info_outline</mat-icon>
               </button>
             </mat-form-field>
@@ -952,11 +952,11 @@ <h1 mat-dialog-title>
                 }}</mat-label>
                 <input
                   matInput
-                  placeholder="{{
+                  autocomplete="new-auth-header-name"
+                  [placeholder]="
                     'create_data_offer_page.authorization_header_placeholder'
                       | translate
-                  }}"
-                  autocomplete="new-auth-header-name"
+                  "
                   [formControl]="form.datasource.controls.httpAuthHeaderName" />
               </mat-form-field>
 
@@ -969,9 +969,9 @@ <h1 mat-dialog-title>
                 <mat-label>{{ 'general.auth_value' | translate }}</mat-label>
                 <input
                   matInput
-                  placeholder="{{
+                  [placeholder]="
                     'create_data_offer_page.bearer_placeholder' | translate
-                  }}"
+                  "
                   [formControl]="
                     form.datasource.controls.httpAuthHeaderValue
                   " />
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
index b36628db..6b44e8f5 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
@@ -244,9 +244,7 @@ <h1 mat-dialog-title>
                 'contract_agreement_page.cus_meth' | translate
               }}</mat-label>
               <mat-select
-                placeholder="{{
-                  'contract_agreement_page.cus_meth' | translate
-                }}"
+                [placeholder]="'contract_agreement_page.cus_meth' | translate"
                 [formControl]="ctrl">
                 <mat-option></mat-option>
                 <mat-option
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page.component.html b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page.component.html
index 2ab638fa..4f1d3b30 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page.component.html
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page.component.html
@@ -167,10 +167,16 @@
       }}</mat-card-subtitle>
       <div>
         <p class="text-justify">
-          {{ 'dashboard_page.marketing_ce_intro' | translate }}
-          <a class="link" href="https://sovity.de" target="_blank">sovity</a
-          ><br />
-          {{ 'dashboard_page.marketing_ce_intro2' | translate }}
+          <translate-with-slot
+            key="dashboard_page.marketing_ce_intro"
+            [html]="true">
+            <a class="link" href="https://sovity.de" target="_blank">sovity</a>
+          </translate-with-slot>
+          <br />
+          <span
+            [innerHTML]="
+              'dashboard_page.marketing_ce_intro2' | translate
+            "></span>
         </p>
         <div class="flex flex-row !space-x-[10px]">
           <a
diff --git a/src/app/shared/business/edit-asset-form/edit-asset-form.component.html b/src/app/shared/business/edit-asset-form/edit-asset-form.component.html
index 416ab9fc..550f0291 100644
--- a/src/app/shared/business/edit-asset-form/edit-asset-form.component.html
+++ b/src/app/shared/business/edit-asset-form/edit-asset-form.component.html
@@ -36,9 +36,9 @@
         <edit-asset-form-input
           class="mt-2"
           fieldId="create-asset-form-contact-email"
-          placeholder="{{
+          [placeholder]="
             'create_data_offer_page.contact_email_placeholder' | translate
-          }}"
+          "
           [tooltip]="'create_data_offer_page.contact_email_tooltip' | translate"
           [label]="'create_data_offer_page.contact_email' | translate"
           [ctrl]="
@@ -50,9 +50,9 @@
           class="mt-5"
           fieldId="create-asset-form-contact-subject"
           label="Preferred E-Mail Subject"
-          placeholder="{{
+          [placeholder]="
             'create_data_offer_page.email_subject_placeholder' | translate
-          }}"
+          "
           [tooltip]="'create_data_offer_page.email_subject_tooltip' | translate"
           [ctrl]="form.datasource.controls.contactPreferredEmailSubject">
         </edit-asset-form-input>
@@ -78,12 +78,12 @@
               form.datasource.controls.dataDestination;
             let ctrl
           "
-          label="{{
-            'create_data_offer_page.custom_datasource_config_json_label'
-              | translate
-          }}"
           fieldId="create-asset-form-custom-datasource-json"
           placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
+          [label]="
+            'create_data_offer_page.custom_datasource_config_json_label'
+              | translate
+          "
           [ctrl]="ctrl"></edit-asset-form-textarea>
 
         <!-- Data Source Type HTTP -->
@@ -259,9 +259,9 @@
 
           <div class="flex flex-col gap-1 mt-3">
             <edit-asset-form-label
-              label="{{
+              [label]="
                 'create_data_offer_page.request_body' | translate
-              }}"></edit-asset-form-label>
+              "></edit-asset-form-label>
             <mat-hint class="mat-hint">
               {{ 'asset_list_page.info_body' | translate }}
             </mat-hint>
@@ -338,11 +338,11 @@
                 }}</mat-label>
                 <input
                   matInput
-                  placeholder="{{
+                  autocomplete="new-auth-header-name"
+                  [placeholder]="
                     'create_data_offer_page.authorization_header_placeholder'
                       | translate
-                  }}"
-                  autocomplete="new-auth-header-name"
+                  "
                   [formControl]="form.datasource.controls.httpAuthHeaderName" />
               </mat-form-field>
               <!-- Auth Header Value -->
@@ -356,9 +356,9 @@
                 }}</mat-label>
                 <input
                   matInput
-                  placeholder="{{
+                  [placeholder]="
                     'create_data_offer_page.bearer_placeholder' | translate
-                  }}"
+                  "
                   [formControl]="
                     form.datasource.controls.httpAuthHeaderValue
                   " />
@@ -401,9 +401,9 @@
 
           <div class="mt-4">
             <edit-asset-form-label
-              label="{{
+              [label]="
                 'create_data_offer_page.additional_headers' | translate
-              }}"></edit-asset-form-label>
+              "></edit-asset-form-label>
             <div class="mt-8"></div>
             <div
               *ngFor="
@@ -418,10 +418,8 @@
                 }}</mat-label>
                 <input
                   matInput
-                  placeholder="{{
-                    'create_data_offer_page.header' | translate
-                  }}"
                   autocomplete="new-header-name"
+                  [placeholder]="'create_data_offer_page.header' | translate"
                   [formControl]="header.controls.headerName" />
               </mat-form-field>
               <!-- Header Value -->
@@ -467,7 +465,7 @@
       <!-- Title -->
       <edit-asset-form-input
         fieldId="create-asset-form-name"
-        tooltip="{{ 'create_data_offer_page.title_tooltip' | translate }}"
+        [tooltip]="'create_data_offer_page.title_tooltip' | translate"
         [label]="'create_data_offer_page.title_label' | translate"
         [placeholder]="'create_data_offer_page.title_placeholder' | translate"
         [ctrl]="form.general.controls.name"></edit-asset-form-input>
@@ -476,7 +474,7 @@
       <edit-asset-form-input
         *ngIf="form.general.controls.id; let ctrl"
         fieldId="create-asset-form-id"
-        tooltip="{{ 'create_data_offer_page.asset_id_tooltip' | translate }}"
+        [tooltip]="'create_data_offer_page.asset_id_tooltip' | translate"
         [placeholder]="'create_data_offer_page.asset_id_label' | translate"
         [label]="'create_data_offer_page.asset_id_label' | translate"
         [ctrl]="ctrl"></edit-asset-form-input>
@@ -520,7 +518,7 @@
           class="mt-4"
           fieldId="create-asset-form-version"
           placeholder="1.0.0"
-          tooltip="{{ 'create_data_offer_page.version_tooltip' | translate }}"
+          [tooltip]="'create_data_offer_page.version_tooltip' | translate"
           [label]="'create_data_offer_page.version' | translate"
           [ctrl]="form.general.controls.version"></edit-asset-form-input>
 
@@ -533,24 +531,24 @@
 
     <edit-asset-form-group
       *ngIf="form.general.controls.dataCategory"
-      myTitle="{{
+      [myTitle]="
         'create_data_offer_page.mobility_information_my_title' | translate
-      }}"
-      description="{{
+      "
+      [description]="
         'create_data_offer_page.mobility_information_description' | translate
-      }}">
+      ">
       <!-- Data Category -->
       <data-category-select
         *ngIf="form.general.controls.dataCategory"
         class="grow"
-        label="{{ 'create_data_offer_page.data_category' | translate }}"
+        [label]="'create_data_offer_page.data_category' | translate"
         [control]="form.general.controls.dataCategory"></data-category-select>
 
       <!-- Data Subcategory -->
       <data-subcategory-select
         *ngIf="form.general.controls.dataSubcategory"
         class="grow"
-        label="{{ 'create_data_offer_page.data_subcategory' | translate }}"
+        [label]="'create_data_offer_page.data_subcategory' | translate"
         [dataCategory]="form.dataCategory"
         [control]="
           form.general.controls.dataSubcategory
@@ -560,7 +558,7 @@
         *ngIf="form.general.value.showAdvancedFields && form.advanced">
         <!-- Transport Mode -->
         <transport-mode-select
-          label="{{ 'create_data_offer_page.transport_mode' | translate }}"
+          [label]="'create_data_offer_page.transport_mode' | translate"
           [control]="
             form.advanced.controls.transportMode
           "></transport-mode-select>
@@ -568,42 +566,38 @@
         <!-- Data Model -->
         <edit-asset-form-input
           fieldId="create-asset-form-data-model"
-          label="{{ 'create_data_offer_page.data_model' | translate }}"
-          placeholder="{{
+          [placeholder]="
             'create_data_offer_page.data_model_placeholder' | translate
-          }}"
-          tooltip="{{
-            'create_data_offer_page.data_model_tooltip' | translate
-          }}"
+          "
+          [tooltip]="'create_data_offer_page.data_model_tooltip' | translate"
+          [label]="'create_data_offer_page.data_model' | translate"
           [ctrl]="form.advanced.controls.dataModel"></edit-asset-form-input>
       </ng-container>
     </edit-asset-form-group>
 
     <edit-asset-form-group
       *ngIf="form.general.value.showAdvancedFields"
-      description="{{
+      [description]="
         'create_data_offer_page.context_information_description' | translate
-      }}"
+      "
       [myTitle]="'create_data_offer_page.documentation' | translate">
       <!-- Endpoint Documentation -->
       <edit-asset-form-input
-        label="{{
-          'create_data_offer_page.endpoint_documentation' | translate
-        }}"
         fieldId="create-asset-form-endpoint-documentation"
         placeholder="https://"
-        tooltip="{{
+        [label]="'create_data_offer_page.endpoint_documentation' | translate"
+        [tooltip]="
           'create_data_offer_page.endpoint_documentation_tooltip' | translate
-        }}"
+        "
         [ctrl]="
           form.general.controls.endpointDocumentation
         "></edit-asset-form-input>
 
       <!-- Content Type -->
       <edit-asset-form-input
-        label="{{ 'create_data_offer_page.content_type' | translate }}"
         fieldId="create-asset-form-content-type"
         placeholder="application/json"
+        [label]="'create_data_offer_page.content_type' | translate"
         [contentTypeHint]="true"
         [ctrl]="form.general.controls.contentType"></edit-asset-form-input>
 
@@ -611,17 +605,17 @@
         <!-- Data sample URLs -->
         <div class="mt-4">
           <edit-asset-form-label
-            label="{{
+            [label]="
               'create_data_offer_page.data_samples' | translate
-            }}"></edit-asset-form-label>
+            "></edit-asset-form-label>
           <button
             class="!scale-[0.9]"
             mat-icon-button
             matSuffix
             matTooltipPosition="right"
-            matTooltip="{{
+            [matTooltip]="
               'create_data_offer_page.data_samples_tooltip' | translate
-            }}">
+            ">
             <mat-icon>info_outline</mat-icon>
           </button>
           <div class="mt-6"></div>
@@ -658,17 +652,17 @@
         <!-- Reference file URLs -->
         <div class="mt-4">
           <edit-asset-form-label
-            label="{{
+            [label]="
               'create_data_offer_page.reference_files' | translate
-            }}"></edit-asset-form-label>
+            "></edit-asset-form-label>
           <button
             class="!scale-[0.9]"
             mat-icon-button
             matSuffix
             matTooltipPosition="right"
-            matTooltip="{{
+            [matTooltip]="
               'create_data_offer_page.reference_files_tooltip' | translate
-            }}">
+            ">
             <mat-icon>info_outline</mat-icon>
           </button>
           <div class="mt-6"></div>
@@ -706,11 +700,11 @@
         <!-- Description -->
         <edit-asset-form-textarea
           *ngIf="form.advanced.controls.referenceFileUrls.length"
-          label="{{
+          fieldId="edit-asset-form-reference-files-description"
+          [label]="
             'create_data_offer_page.reference_files_description_label'
               | translate
-          }}"
-          fieldId="edit-asset-form-reference-files-description"
+          "
           [ctrl]="form.advanced.controls.referenceFilesDescription"
           [placeholder]="
             '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
@@ -732,32 +726,30 @@
 
     <edit-asset-form-group
       *ngIf="form.general.value.showAdvancedFields && form.advanced"
-      myTitle="{{ 'create_data_offer_page.location_time_title' | translate }}"
-      description="{{
+      [description]="
         'create_data_offer_page.location_time_description' | translate
-      }}">
+      "
+      [myTitle]="'create_data_offer_page.location_time_title' | translate">
       <!-- Temporal coverage -->
       <div
         *ngIf="form.advanced.controls.temporalCoverage; let ctrl"
         class="mt-4">
         <edit-asset-form-label
-          label="{{
+          [label]="
             'create_data_offer_page.temporal_coverage' | translate
-          }}"></edit-asset-form-label>
+          "></edit-asset-form-label>
         <mat-form-field class="w-full" color="accent">
           <mat-date-range-input [formGroup]="ctrl" [rangePicker]="picker">
             <input
               matStartDate
               formControlName="from"
-              placeholder="{{
-                'create_data_offer_page.start_date' | translate
-              }}" />
+              [placeholder]="'create_data_offer_page.start_date' | translate" />
             <input
               matEndDate
               formControlName="toInclusive"
-              placeholder="{{
-                'create_data_offer_page.end-date-inclusive' | translate
-              }}" />
+              [placeholder]="
+                'create_data_offer_page.end_date_inclusive' | translate
+              " />
           </mat-date-range-input>
           <mat-hint
             >{{ 'create_data_offer_page.temporal_coverage_hint' | translate }}
@@ -776,15 +768,15 @@
       <edit-asset-form-input
         class="mt-3"
         fieldId="create-asset-form-data-update-frequency"
-        label="{{
+        [label]="
           'create_data_offer_page.data_update_frequency_label' | translate
-        }}"
-        placeholder="{{
+        "
+        [placeholder]="
           'create_data_offer_page.data_update_frequency_placeholder' | translate
-        }}"
-        tooltip="{{
+        "
+        [tooltip]="
           'create_data_offer_page.data_update_frequency_tooltip' | translate
-        }}"
+        "
         [ctrl]="
           form.advanced.controls.dataUpdateFrequency
         "></edit-asset-form-input>
@@ -792,13 +784,11 @@
       <!-- Geo reference method -->
       <edit-asset-form-input
         fieldId="create-asset-form-geo-ref-method"
-        label="{{ 'create_data_offer_page.geo_reference_method' | translate }}"
-        placeholder="{{
+        [placeholder]="
           'create_data_offer_page.geo_reference_placeholder' | translate
-        }}"
-        tooltip="{{
-          'create_data_offer_page.geo_reference_tooltip' | translate
-        }}"
+        "
+        [tooltip]="'create_data_offer_page.geo_reference_tooltip' | translate"
+        [label]="'create_data_offer_page.geo_reference_method' | translate"
         [ctrl]="
           form.advanced.controls.geoReferenceMethod
         "></edit-asset-form-input>
@@ -806,27 +796,27 @@
       <!-- Geo location -->
       <edit-asset-form-input
         fieldId="create-asset-form-geo-location"
-        label="{{ 'create_data_offer_page.geo_location_label' | translate }}"
         placeholder="40.741895,-73.989308"
-        tooltip="{{
+        [tooltip]="
           'create_data_offer_page.geo_location_description' | translate
-        }}"
+        "
+        [label]="'create_data_offer_page.geo_location_label' | translate"
         [ctrl]="form.advanced.controls.geoLocation"></edit-asset-form-input>
 
       <!-- NUTS locations -->
       <div>
         <edit-asset-form-label
-          label="{{
+          [label]="
             'create_data_offer_page.nuts_locations_label' | translate
-          }}"></edit-asset-form-label>
+          "></edit-asset-form-label>
         <button
           class="!scale-[0.9]"
           mat-icon-button
           matSuffix
           matTooltipPosition="right"
-          matTooltip="{{
+          [matTooltip]="
             'create_data_offer_page.nuts_locations_tooltip' | translate
-          }}">
+          ">
           <mat-icon>info_outline</mat-icon>
         </button>
         <div class="mt-6"></div>
@@ -863,21 +853,19 @@
 
     <edit-asset-form-group
       *ngIf="form.general.value.showAdvancedFields"
-      myTitle="{{
-        'create_data_offer_page.legal_information_title' | translate
-      }}"
-      description="{{
+      [myTitle]="'create_data_offer_page.legal_information_title' | translate"
+      [description]="
         'create_data_offer_page.legal_information_description' | translate
-      }}">
+      ">
       <!-- Sovereign legal name -->
       <edit-asset-form-input
         *ngIf="form.advanced"
-        label="{{ 'create_data_offer_page.sovereign_label' | translate }}"
         fieldId="create-asset-form-sovereign"
-        placeholder="{{
+        [placeholder]="
           'create_data_offer_page.sovereign_placeholder' | translate
-        }}"
-        tooltip="{{ 'create_data_offer_page.sovereign_tooltip' | translate }}"
+        "
+        [tooltip]="'create_data_offer_page.sovereign_tooltip' | translate"
+        [label]="'create_data_offer_page.sovereign_label' | translate"
         [ctrl]="
           form.advanced.controls.sovereignLegalName
         "></edit-asset-form-input>
@@ -885,32 +873,28 @@
       <!-- Publisher -->
       <edit-asset-form-input
         class="mt-3"
-        label="{{ 'create_data_offer_page.publisher_label' | translate }}"
         fieldId="create-asset-form-publisher"
         placeholder="https://"
-        tooltip="{{ 'create_data_offer_page.publisher_tooltip' | translate }}"
+        [tooltip]="'create_data_offer_page.publisher_tooltip' | translate"
+        [label]="'create_data_offer_page.publisher_label' | translate"
         [ctrl]="form.general.controls.publisher"></edit-asset-form-input>
 
       <!-- Standard License -->
       <edit-asset-form-input
-        label="{{
-          'create_data_offer_page.standard_license_label' | translate
-        }}"
         fieldId="create-asset-form-standard-license"
         placeholder="https://"
-        tooltip="{{
+        [label]="'create_data_offer_page.standard_license_label' | translate"
+        [tooltip]="
           'create_data_offer_page.standard_license_tooltip' | translate
-        }}"
+        "
         [ctrl]="form.general.controls.standardLicense"></edit-asset-form-input>
 
       <!-- Conditions for use -->
       <edit-asset-form-textarea
         *ngIf="form.advanced"
         textareaClasses="h-28"
-        label="{{
-          'create_data_offer_page.conditions_for_use_label' | translate
-        }}"
         fieldId="create-asset-form-conditions-for-use"
+        [label]="'create_data_offer_page.conditions_for_use_label' | translate"
         [ctrl]="form.advanced.controls.conditionsForUse"
         [placeholder]="
           '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
@@ -952,10 +936,10 @@
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.publish_unrestricted_tooltip'
                   | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </mat-radio-button>
@@ -966,9 +950,9 @@
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.publish_restricted_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </mat-radio-button>
@@ -979,9 +963,9 @@
               mat-icon-button
               matSuffix
               matTooltipPosition="right"
-              matTooltip="{{
+              [matTooltip]="
                 'create_data_offer_page.publish_asset_only_tooltip' | translate
-              }}">
+              ">
               <mat-icon>info_outline</mat-icon>
             </button>
           </mat-radio-button>
diff --git a/src/app/shared/business/policy-editor/editor/recipes/timespan-restriction-dialog/timespan-restriction-dialog.component.html b/src/app/shared/business/policy-editor/editor/recipes/timespan-restriction-dialog/timespan-restriction-dialog.component.html
index f00cfbae..a14abb38 100644
--- a/src/app/shared/business/policy-editor/editor/recipes/timespan-restriction-dialog/timespan-restriction-dialog.component.html
+++ b/src/app/shared/business/policy-editor/editor/recipes/timespan-restriction-dialog/timespan-restriction-dialog.component.html
@@ -15,11 +15,11 @@ <h1 mat-dialog-title>
         <input
           matStartDate
           formControlName="start"
-          placeholder="{{ 'general.start_date' | translate }}" />
+          [placeholder]="'general.start_date' | translate" />
         <input
           matEndDate
           formControlName="end"
-          placeholder="{{ 'general.end_date' | translate }}" />
+          [placeholder]="'general.end_date' | translate" />
       </mat-date-range-input>
       <mat-hint>DD/MM/YYYY – DD/MM/YYYY</mat-hint>
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/app/shared/common/translate-with-slot/translate-with-slot.component.html b/src/app/shared/common/translate-with-slot/translate-with-slot.component.html
index 50702d8a..e016fac1 100644
--- a/src/app/shared/common/translate-with-slot/translate-with-slot.component.html
+++ b/src/app/shared/common/translate-with-slot/translate-with-slot.component.html
@@ -1,5 +1,7 @@
-<span *ngIf="textBefore">{{ textBefore }}</span>
+<span *ngIf="textBefore && !html">{{ textBefore }}</span>
+<span *ngIf="textBefore && html" [innerHtml]="textBefore"></span>
 <ng-container *ngIf="hasMiddle">
   <ng-content></ng-content>
 </ng-container>
-<span *ngIf="textAfter">{{ textAfter }}</span>
+<span *ngIf="textAfter && !html">{{ textAfter }}</span>
+<span *ngIf="textAfter && html" [innerHtml]="textAfter"></span>
diff --git a/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts b/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts
index ccc323a3..fbba3630 100644
--- a/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts
+++ b/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts
@@ -11,6 +11,10 @@ import {SimpleChangesTyped} from '../../../core/utils/angular-utils';
 export class TranslateWithSlotComponent implements OnChanges, OnDestroy {
   @Input()
   key!: string;
+
+  @Input()
+  html = false;
+
   key$ = new Subject();
 
   textBefore = '';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index e29d76ab..0cc649d9 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -308,7 +308,7 @@
     "email_subject_placeholder": "Data Offer 'xyz'",
     "email_subject_tooltip": "When potential customers reach out to you via email, you’ll receive messages with this subject line.",
     "email_subject": "Preferred E-Mail Subject",
-    "end-date-inclusive": "End date (inclusive)",
+    "end_date_inclusive": "End date (inclusive)",
     "endpoint_documentation_tooltip": "URL to the technical documentation about the data to be received.",
     "endpoint_documentation": "Endpoint Documentation",
     "general_information_description": "Fill out general information about the asset.",
@@ -431,8 +431,8 @@
     "marketing_about": "The Eclipse Dataspace Components framework facilitates sovereign, inter-organizational data exchange.",
     "marketing_about2": "It implements the International Data Spaces standard (IDS) as well as relevant protocols associated with GAIA-X.",
     "marketing_about3": "The framework is designed as extensible as possible to encourage integrations into various data ecosystems.",
-    "marketing_ce_intro": "To join data spaces like Mobility Data Space or Catena-X within minutes, consider the managed solution by",
-    "marketing_ce_intro2": "- the Connector-as-a-Service (CaaS) based on open-source software enriched with key enterprise features.",
+    "marketing_ce_intro": "To join data spaces like <b>Mobility Data Space</b> or <b>Catena-X</b> within minutes, consider the managed solution by {}.",
+    "marketing_ce_intro2": "- the <b>Connector-as-a-Service (CaaS)</b> based on open-source software enriched with <b>key enterprise features.</b>",
     "marketing_mds_basic_intro": "This EDC Connector on the subscription level Basic is provided by sovity to enable your first steps in the Mobility Data Space (MDS).",
     "marketing_mds_basic_intro2": "For additional features and advanced capacities, please feel free to contact us.",
     "no_transfer": "NO PROVIDING TRANSFER PROCESSES",