feat: implement signal-based title management in RouteService and update components to utilize it

Author: timothydodd

src/app/_services/route.service.ts

@@ -1,8 +1,9 @@
-import { Component, Type } from '@angular/core';
+import { Component, signal, Type } from '@angular/core';
 import { DefaultExport, Routes } from '@angular/router';
 import { Observable } from 'rxjs';
 
 export class RouteService {
+  public static Title = signal<string>('Util Plex');
   public static getRoutes() {
     const routes: Routes = [];
 

src/app/app.component.html

@@ -4,8 +4,8 @@
   <div class="back">
     <div class="route-container">
       <div class="top-bar">
-        @if (title()) {
-          <h1>{{ title() }}</h1>
+        @if (RouterService.Title()) {
+          <h1>{{ RouterService.Title() }}</h1>
         }
         <a href="https://github.com/timothydodd/utilplex"><img alt="GitHub" src="assets/github-mark.svg" /> </a>
       </div>

src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
+import { RouteService } from './_services/route.service';
 import { SideBarComponent } from './nav/side-bar/side-bar.component';
 @Component({
   selector: 'app-root',
@@ -9,5 +10,5 @@ import { SideBarComponent } from './nav/side-bar/side-bar.component';
 })
 export class AppComponent {
   router = inject(Router);
-  title = signal(null);
+  RouterService = RouteService;
 }

src/app/converters/convert-view/convert-view.component.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { Meta, Title } from '@angular/platform-browser';
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
-import { getRouteData } from 'src/app/_services/route.service';
+import { getRouteData, RouteService } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from 'src/app/monaco/ng-monaco-config';
 import { ConverterServiceBase } from '../_services/converter.service';
@@ -25,8 +25,6 @@ export class ConvertViewComponent {
   outputCode = signal<string>('');
   error = signal<string>('');
 
-  title = '';
-
   private meta = inject(Meta);
   private titleService = inject(Title);
   constructor() {
@@ -36,7 +34,7 @@ export class ConvertViewComponent {
     }
     this.titleService.setTitle('UtilPlex |' + data.title);
     if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
-    this.title = this.convertService.title;
+    RouteService.Title.set(this.convertService.title);
     this.inputOptions = {
       theme: 'dracula',
       language: this.convertService.languageFrom,

src/app/encoders/encoder-view/encoder-view.component.ts

@@ -6,7 +6,7 @@ import { from } from 'rxjs';
 
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { Meta, Title } from '@angular/platform-browser';
-import { getRouteData } from 'src/app/_services/route.service';
+import { getRouteData, RouteService } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from 'src/app/monaco/ng-monaco-config';
 import { SwitchComponent } from '../../components/switch/switch.component';
@@ -71,7 +71,6 @@ export class EncoderViewComponent {
   mode = signal<string>('encode');
   isEncode = signal<boolean>(true);
   modeLabel = computed(() => (this.isEncode() ? 'Encode' : 'Decode'));
-  title = '';
   private meta = inject(Meta);
   private titleService = inject(Title);
   constructor() {
@@ -81,7 +80,8 @@ export class EncoderViewComponent {
     }
     this.titleService.setTitle('UtilPlex |' + data.title);
     if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
-    this.title = this.convertService.title;
+
+    RouteService.Title.set(this.convertService.title);
     toObservable(this.isEncode)
       .pipe(takeUntilDestroyed())
       .subscribe(() => {

src/app/formatters/format-view/format-view.component.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { Meta, Title } from '@angular/platform-browser';
 import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
-import { getRouteData } from 'src/app/_services/route.service';
+import { getRouteData, RouteService } from 'src/app/_services/route.service';
 import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from '../../monaco/ng-monaco-config';
 import { FormatViewService } from '../_services/sql-format.service';
@@ -23,7 +23,7 @@ export class FormatViewComponent {
   inputCode = signal<string>('');
   outputCode = signal<string>('');
   error = signal<string>('');
-  title = '';
+
   private meta = inject(Meta);
   private titleService = inject(Title);
   constructor() {
@@ -33,7 +33,7 @@ export class FormatViewComponent {
     }
     this.titleService.setTitle('UtilPlex |' + data.title);
     if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
-    this.title = this.formatService.title;
+    RouteService.Title.set(this.formatService.title);
 
     this.inputOptions = {
       theme: 'dracula',

src/app/pages/welcome/welcome.component.ts

@@ -49,5 +49,6 @@ export class WelcomeComponent {
     }
     this.title.setTitle('UtilPlex |' + data.title);
     if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
+    RouteService.Title.set('Welcome to Util Plex');
   }
 }

src/app/time/time-zones/time-zones.component.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { Meta, Title } from '@angular/platform-browser';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
-import { getRouteData } from 'src/app/_services/route.service';
+import { getRouteData, RouteService } from 'src/app/_services/route.service';
 import { SwitchComponent } from 'src/app/components/switch/switch.component';
 @Component({
   selector: 'app-time-zones',
@@ -34,6 +34,7 @@ export class TimeZonesComponent {
     this.title.setTitle('UtilPlex |' + data.title);
     if (data.description) this.meta.updateTag({ name: 'description', content: data.description });
     this.loadData();
+    RouteService.Title.set(data.title);
   }
   loadData() {
     this.httpClient.get<TimeZone[]>('./assets/json/timezones.json').subscribe((res) => {