Change detection (signal) - alap:

Angular automatikusan erzekelni tudja a változásokat.

Minden signal-ban tárolt érték változásnál az angular ujra kirendereli és ujraszámolja a template-ben az erteket (frissiti a UI-t).

import {Component, computed, signal} from '@angular/core';
import {DUMMY_USERS} from '../dummy-users';

const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length)

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [],
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})
export class UserComponent {
  selectedUser = signal(DUMMY_USERS[randomIndex]);
  imagePath = computed(() => 'assets/users' + this.selectedUser().avatar)

  // Ez helyett signal-lal a fenti computed function-t használjuk, ez feliratkozik a signal-ra,
  // ez recompute az imagePath erteket
  // get imagePath() {
  //   return 'assets/users/' + this.selectedUser.avatar
  // }

  onSelectUser() {
    const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length)
    this.selectedUser.set(DUMMY_USERS[randomIndex])
  }
}

<div>
  <button (click)="onSelectUser()">
    <img [src]="imagePath()"
         [alt]="selectedUser().name"
    />
    <span>{{ selectedUser().name }}</span>
  </button>
</div>