router: convert path to query param

src/app/app.component.html

@@ -8,14 +8,14 @@ <h1>NüschtOS Search</h1>
 
     <ul>
       <li *ngFor="let option of results | async">
-        <a [routerLink]="option.name" queryParamsHandling="merge" routerLinkActive="active"><code>{{option.name}}</code></a>
+        <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge" routerLinkActive="active"><code>{{option.name}}</code></a>
       </li>
     </ul>
   </div>
 </aside>
 
 <main>
   <div class="card">
-    <router-outlet />
+    <app-option></app-option>
   </div>
 </main>

src/app/app.component.ts

@@ -1,24 +1,27 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
 import { SearchService } from './core/search.service';
 import { of, switchMap } from 'rxjs';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { TextFieldComponent } from "@feel/form";
+import { OptionComponent } from './pages/option/option.component';
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AsyncPipe, NgFor, ReactiveFormsModule, TextFieldComponent, RouterLink],
+  imports: [RouterOutlet, AsyncPipe, NgFor, ReactiveFormsModule, TextFieldComponent, RouterLink, OptionComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements AfterViewInit {
 
   protected readonly search = new FormControl();
   protected readonly results = this.search.valueChanges.pipe(
     switchMap(query => {
       const q = query?.trim();
-      if (q !== AppComponent.getQuery()) this.router.navigate([], { queryParams: { query: q } });
+      if (q !== AppComponent.getQuery()) this.router.navigate([], { queryParams: { query: q }, queryParamsHandling: 'merge' });
       if (q && q.length > 0) {
         return this.searchService.search(q);
       } else {

src/app/app.config.ts

@@ -1,13 +1,11 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
-    provideHttpClient()
+    provideRouter([]),
+    provideHttpClient(),
   ]
 };

src/app/pages/option/option.component.html

@@ -1,11 +1,11 @@
-<div *ngIf="(option | async) as option" class="typography">
+<div *ngIf="(option | async) as option; else notFound" class="typography">
   <h2><code>{{option.name}}</code></h2>
   <table>
     <tbody>
       <tr>
         <td>Declarations</td>
         <td>
-  <a *ngFor="let declaration of option.declarations" [href]="declaration">{{declaration}}</a>
+          <a *ngFor="let declaration of option.declarations" [href]="declaration">{{declaration}}</a>
         </td>
       </tr>
       <tr>
@@ -28,3 +28,7 @@ <h2><code>{{option.name}}</code></h2>
     </tbody>
   </table>
 </div>
+
+<ng-template #notFound>
+  <p>Try searching for something!</p>
+</ng-template>

src/app/pages/option/option.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { SearchService } from '../../core/search.service';
 import { ActivatedRoute } from '@angular/router';
 import { switchMap } from 'rxjs';
@@ -9,11 +9,12 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common';
   standalone: true,
   imports: [NgIf, NgFor, AsyncPipe],
   templateUrl: './option.component.html',
-  styleUrl: './option.component.scss'
+  styleUrl: './option.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OptionComponent {
 
-  protected readonly option = this.activatedRoute.params.pipe(
+  protected readonly option = this.activatedRoute.queryParams.pipe(
     switchMap(({option}) => this.searchService.getByName(option)),
   );
 

src/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>NuschtSearch</title>
-  <base href="/">
+  <!--<base href="/">-->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>