add searchpage

angular.json

@@ -15,7 +15,7 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "app",
+      "prefix": "sd",
       "architect": {
         "build": {
           "builder": "@angular/build:application",
@@ -29,9 +29,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
+            "styles": ["src/styles.scss"]
-              "src/styles.scss"
-            ]
           },
           "configurations": {
             "production": {

src/app/app.html

@@ -1,8 +1,7 @@
 <main class="main">
-  <div class="content">
   <h1>Search Dispatcher</h1>
   <p>Search with Intent</p>
+  <div class="content">
+    <router-outlet />
   </div>
 </main>
-
-<router-outlet />

src/app/app.routes.ts

@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
+import { SearchBox } from './search-box/search-box';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', redirectTo: 'main', pathMatch: 'full' },
+  { path: 'main', component: SearchBox },
+];

src/app/app.ts

@@ -1,11 +1,12 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SearchBox } from './search-box/search-box';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, SearchBox],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
 })
 export class App {
   protected readonly title = signal('search-dispatcher');

src/app/search-box/search-box.html

@@ -0,0 +1,8 @@
+<form (submit)="onSubmit($event)">
+  <label>
+    Search:
+    <input type="text" [formField]="searchForm.term" />
+  </label>
+
+  <button type="submit">Search</button>
+</form>

src/app/search-box/search-box.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchBox } from './search-box';
+
+describe('SearchBox', () => {
+  let component: SearchBox;
+  let fixture: ComponentFixture<SearchBox>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchBox],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SearchBox);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/search-box/search-box.ts

@@ -0,0 +1,36 @@
+import { Component, signal, ChangeDetectionStrategy, inject } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
+import { Router } from '@angular/router';
+
+interface SearchObject {
+  term: string;
+  service: string;
+}
+
+@Component({
+  selector: 'sd-search-box',
+  imports: [FormField],
+  templateUrl: './search-box.html',
+  styleUrl: './search-box.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchBox {
+  private router = inject(Router);
+
+  searchModel = signal<SearchObject>({
+    term: '',
+    service: '',
+  });
+
+  searchForm = form(this.searchModel, (schemaPath) => {
+    required(schemaPath.term, { message: 'Term is required' });
+  });
+
+  onSubmit(event: Event) {
+    event.preventDefault();
+
+    const searchObject = this.searchModel();
+
+    window.location.href = `https://www.startpage.com/do/dsearch?q=${searchObject.term}`;
+  }
+}