signals

src/app/app.component.ts

@@ -1,17 +1,21 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { filter, from, map, reduce } from 'rxjs';
 import { Router, RouterOutlet } from '@angular/router';
+import {SignalComponent} from "./signal/signal.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
-  template: `<router-outlet />`,
+  imports: [RouterOutlet, SignalComponent],
+  template: `
+    <app-signal />
+    <router-outlet />
+  `,
 })
 export class AppComponent implements OnInit {
   router: Router = inject(Router);
 
   ngOnInit() {
-    this.router.navigate(['hotels']);
+    //this.router.navigate(['hotels']);
   }
 }

src/app/signal/User.ts

@@ -0,0 +1 @@
+export type User = { id: number, name: string, age: number };

src/app/signal/search/input/input.component.html

@@ -0,0 +1 @@
+<input type="text" [(ngModel)]="search" />

src/app/signal/search/input/input.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-signal-search-input',
+  standalone: true,
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './input.component.html',
+})
+export class InputComponent {
+  search: string = '';
+}

src/app/signal/search/result/result.component.html

@@ -0,0 +1,6 @@
+<div *ngFor="let user of matchingUsers()">
+  <div>
+    <div>{{ user.name }}</div>
+    <div>{{ user.age }}</div>
+  </div>
+</div>

src/app/signal/search/result/result.component.ts

@@ -0,0 +1,67 @@
+import {Component, computed, input, signal, Signal} from '@angular/core';
+import {User} from "../../User";
+import {NgForOf} from "@angular/common";
+
+@Component({
+  selector: 'app-signal-search-result',
+  standalone: true,
+  imports: [
+    NgForOf
+  ],
+  templateUrl: './result.component.html',
+})
+export class ResultComponent {
+  search = input<string>('', {
+    transform: (value) => value.toLowerCase()
+  });
+
+  matchingUsers: Signal<User[]> = computed(() => {
+    return this.stuff.filter((user) => {
+      return user.name.toLowerCase().includes(this.search().toLowerCase());
+    });
+  })
+
+  readonly stuff: User[] = [
+    {
+      id: 1,
+      name: 'John Doe',
+      age: 20
+    },
+    {
+      id: 2,
+      name: 'Jane Doe',
+      age: 22
+    },
+    {
+      id: 3,
+      name: 'Jack Doe',
+      age: 25
+    },
+    {
+      id: 4,
+      name: 'Jill Doe',
+      age: 28
+    },
+    {
+      id: 5,
+      name: 'Joe Doe',
+      age: 30
+    },
+    {
+      id: 6,
+      name: 'Jim Doe',
+      age: 35
+    },
+    {
+      id: 7,
+      name: 'Jerry Doe',
+      age: 40
+    },
+    {
+      id: 8,
+      name: 'Jessie Doe',
+      age: 45
+    }
+  ];
+
+}

src/app/signal/signal.component.html

@@ -0,0 +1,10 @@
+<p>{{this.a()}}</p>
+<button (click)="increaseA()">increase</button>
+<br>
+<p>{{this.b()|json}}</p>
+<button (click)="increaseB()">increase</button>
+<br>
+<div>
+  <app-signal-search-input #ref />
+  <app-signal-search-result [search]="ref.search" />
+</div>

src/app/signal/signal.component.ts

@@ -0,0 +1,31 @@
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
+import {JsonPipe, NgForOf, NgIf} from "@angular/common";
+import {User} from "./User";
+import {InputComponent} from "./search/input/input.component";
+import {ResultComponent} from "./search/result/result.component";
+
+@Component({
+  selector: 'app-signal',
+  standalone: true,
+  imports: [
+    JsonPipe,
+    NgForOf,
+    NgIf,
+    InputComponent,
+    ResultComponent
+  ],
+  templateUrl: './signal.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SignalComponent {
+  a = signal<number>(2);
+  b = signal<User>({id: 1, name: 'John Doe', age: 20});
+
+  increaseA() {
+    this.a.update((value) => value + 1);
+  }
+
+  increaseB() {
+    this.b.update((value) => ({...value, age: value.age + 1}));
+  }
+}