input/output -- Output decorator

output-ot használva a child komponens tud kommunikálni a szülővel, tud eseményt küldeni hogy valami történet vele
input-ot használva a szülő tud kommunikálni a child komponenssel, olyan property-k amiket a szülő tud beállítani

Output decoratorral, eventemiterrel (minden value-t kiad a select prperty-n keresztül a szülő komponensekbe). Ha a user ki van választva akkor bejön az ID az @INput-on keresztül és az emit képes továbbítni

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

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [],
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})
export class UserComponent {
  @Input({required: true}) id!: string;
  @Input({required: true}) avatar!: string;
  @Input({required: true}) name!: string;
  @Output() select = new EventEmitter();

  get imagePath() {
    return 'assets/users/' + this.avatar;
  }

  onSelectUser() {
    this.select.emit(this.id);
    console.log('user.component.ts: ' + this.id);
  }
}

app.component.html: használjuk az előbb elkészített select event-et, built-in eventeket is használhatunk itt. Az $event váltzozó elérhető built-in típusoknál is.

<main>
  <ul id="users">
    <li>
      <app-user
        [id]="users[0].id"
        [avatar]="users[0].avatar"
        [name]="users[0].name"
        (select)="onSelectUser($event)"
      />
    </li>
    <li>
      <app-user
        [id]="users[1].id"
        [avatar]="users[1].avatar"
        [name]="users[1].name"
        (select)="onSelectUser($event)"

      />
    </li>
    <li>
      <app-user
        [id]="users[2].id"
        [avatar]="users[2].avatar"
        [name]="users[2].name"
        (select)="onSelectUser($event)"

      />
    </li>
    <li>
      <app-user
        [id]="users[3].id"
        [avatar]="users[3].avatar"
        [name]="users[3].name"
        (select)="onSelectUser($event)"
      />
    </li>
  </ul>

  TASK OF THE USER
</main>

app.component.ts: (itt létrehozzuk a metódust amit használunk a app.component.html-ben)

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {UserComponent} from './user/user.component';
import {DUMMY_USERS} from './dummy-users';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  users= DUMMY_USERS;

  onSelectUser(id: string) {
    console.log('User selected ' + id);
  }
}