Angular Signal Example

@Input() messageSignal: Signal<string> = signal('Alapértelmezett üzenet');

Parent component

A szülő komponens signal-t használ az adatok átadására a gyermek komponens felé.

import { Component, signal } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [ChildComponent],
  templateUrl: './parent.component.html',
  styleUrl: './parent.component.scss'
})
export class ParentComponent {
  parentMessage = signal('Message from parent (Signal)');

}

<h2>Parent component</h2>
<app-child [messageSignal]="parentMessage"/>

Child component

A gyermek komponens fogadja a signal-t az @Input({ required: true }) segítségével.

import { Component, Input, Signal } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [],
  templateUrl: './child.component.html',
  styleUrl: './child.component.scss'
})
export class ChildComponent {
  @Input({ required: true }) messageSignal!: Signal<string>;

}

<h3>Child component</h3>
<p>{{ messageSignal() }} </p>

Mi történik itt?

1. Szülő komponensben:
   • A signal egy reaktív adatforrást hoz létre, amely automatikusan frissül, ha az értékét megváltoztatod.
   • Ezt az @Input-on keresztül adod át a gyermek komponensnek.
2. Gyermek komponensben:
   • Az @Input egy Signal<string> típust vár, amelyet megkap a szülőtől.
   • A signal értékét a message() meghívásával érheted el.
3. Miért jobb a signal?
   • A signal-ok automatikusan reaktívak, így nem kell külön ChangeDetectionStrategy-t használnod.
   • Egyszerűbb állapotkezelés, kevesebb boilerplate kód.