diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1dcf4b5..4a2f9d6 100644
--- a/src/app/app.component.ts
+++ b/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: ``,
+ imports: [RouterOutlet, SignalComponent],
+ template: `
+
+
+ `,
})
export class AppComponent implements OnInit {
router: Router = inject(Router);
ngOnInit() {
- this.router.navigate(['hotels']);
+ //this.router.navigate(['hotels']);
}
}
diff --git a/src/app/signal/User.ts b/src/app/signal/User.ts
new file mode 100644
index 0000000..dc60d03
--- /dev/null
+++ b/src/app/signal/User.ts
@@ -0,0 +1 @@
+export type User = { id: number, name: string, age: number };
diff --git a/src/app/signal/search/input/input.component.html b/src/app/signal/search/input/input.component.html
new file mode 100644
index 0000000..dd75512
--- /dev/null
+++ b/src/app/signal/search/input/input.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/signal/search/input/input.component.ts b/src/app/signal/search/input/input.component.ts
new file mode 100644
index 0000000..e84083f
--- /dev/null
+++ b/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 = '';
+}
diff --git a/src/app/signal/search/result/result.component.html b/src/app/signal/search/result/result.component.html
new file mode 100644
index 0000000..47a50ac
--- /dev/null
+++ b/src/app/signal/search/result/result.component.html
@@ -0,0 +1,6 @@
+
+
+
{{ user.name }}
+
{{ user.age }}
+
+
diff --git a/src/app/signal/search/result/result.component.ts b/src/app/signal/search/result/result.component.ts
new file mode 100644
index 0000000..188d45c
--- /dev/null
+++ b/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('', {
+ transform: (value) => value.toLowerCase()
+ });
+
+ matchingUsers: Signal = 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
+ }
+ ];
+
+}
diff --git a/src/app/signal/signal.component.html b/src/app/signal/signal.component.html
new file mode 100644
index 0000000..6ba2b98
--- /dev/null
+++ b/src/app/signal/signal.component.html
@@ -0,0 +1,10 @@
+{{this.a()}}
+
+
+{{this.b()|json}}
+
+
+
diff --git a/src/app/signal/signal.component.ts b/src/app/signal/signal.component.ts
new file mode 100644
index 0000000..85b3c7c
--- /dev/null
+++ b/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(2);
+ b = signal({id: 1, name: 'John Doe', age: 20});
+
+ increaseA() {
+ this.a.update((value) => value + 1);
+ }
+
+ increaseB() {
+ this.b.update((value) => ({...value, age: value.age + 1}));
+ }
+}