Use non-breaking space for "Kasteel Amerongen" and "LOD" on the landing page

Author: Simon-Dirks

src/app/components/header/header.component.html

@@ -3,9 +3,10 @@
 >
   <button class="text-left" (click)="onButtonClicked('')">
     <!--    <div class="text-sm sm:text-base">Prototype Zoekomgeving</div>-->
-    <div class="font-semibold text-lg sm:text-2xl mb-2">
-      {{ "castle-amerongen" | translate }}
-    </div>
+    <div
+      class="font-semibold text-lg sm:text-2xl mb-2"
+      [innerHTML]="translate.get('castle-amerongen') | async"
+    ></div>
   </button>
 
   <div class="flex-grow">

src/app/components/header/header.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { featherSearch, featherX } from '@ng-icons/feather-icons';
 import { NgIcon } from '@ng-icons/core';
-import { NgClass, NgIf } from '@angular/common';
+import { AsyncPipe, NgClass, NgIf } from '@angular/common';
 import { UrlService } from '../../services/url.service';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { LangSwitchComponent } from '../lang-switch/lang-switch.component';
@@ -15,7 +15,14 @@ export enum HeaderView {
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [NgIcon, NgIf, TranslatePipe, NgClass, LangSwitchComponent],
+  imports: [
+    NgIcon,
+    NgIf,
+    TranslatePipe,
+    NgClass,
+    LangSwitchComponent,
+    AsyncPipe,
+  ],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })

src/app/components/home-intro/home-intro.component.html

@@ -2,8 +2,13 @@
   <div class="sm:w-[80%] mx-auto">
     <h1 class="text-center text-2xl sm:text-5xl mb-0 sm:mb-6 font-bold">
       {{ "discover-history-of" | translate }}
-      <span class="text-primary">{{ "castle-amerongen" | translate }}</span>
-      {{ "on-experimental-lod-website" | translate }}
+      <span
+        class="text-primary"
+        [innerHTML]="translate.get('castle-amerongen') | async"
+      ></span>
+      <span>&nbsp;</span>
+      <span [innerHTML]="translate.get('on-experimental-lod-website') | async">
+      </span>
     </h1>
 
     <!--    <p>-->

src/app/components/home-intro/home-intro.component.ts

@@ -1,14 +1,18 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-home-intro',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, AsyncPipe],
   templateUrl: './home-intro.component.html',
   styleUrl: './home-intro.component.scss',
 })
 export class HomeIntroComponent {
-  constructor(public router: Router) {}
+  constructor(
+    public router: Router,
+    public translate: TranslateService,
+  ) {}
 }

src/assets/i18n/en.json

@@ -1,13 +1,13 @@
 {
   "1-result": "1 result",
   "and": "and",
-  "castle-amerongen": "Amerongen Castle",
+  "castle-amerongen": "Amerongen Castle",
   "discover-history-of": "Discover the history of",
   "hua": "The Utrecht Archives",
   "load-more-results": "Load more results",
   "more-info": "More info",
   "no-results-found": "No results found",
-  "on-experimental-lod-website": "on this experimental Linked Open Data website",
+  "on-experimental-lod-website": "on this experimental Linked Open Data website",
   "razu": "Regional Archives South Utrecht",
   "results": "results",
   "search": "Search",

src/assets/i18n/nl.json

@@ -1,13 +1,13 @@
 {
   "1-result": "1 resultaat",
   "and": "en",
-  "castle-amerongen": "Kasteel Amerongen",
+  "castle-amerongen": "Kasteel Amerongen",
   "discover-history-of": "Ontdek de geschiedenis van",
   "hua": "Het Utrechts Archief",
   "load-more-results": "Laad meer resultaten",
   "more-info": "Meer info",
   "no-results-found": "Geen resultaten gevonden",
-  "on-experimental-lod-website": "op deze experimentele Linked Open Data website",
+  "on-experimental-lod-website": "op deze experimentele Linked Open Data website",
   "razu": "Regionaal Archief Zuid-Utrecht",
   "results": "resultaten",
   "search": "Zoek",