output function

Ugyanaz a funkcionalitás mint $Output dekorátornál de itt nem kell kézzel EventEmitter-t hívni, a háttérben automatuksan megoldja az angular. Nem használ signal-t, az input használ!!

user.component.ts:

import {Component, 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<string>();
  select = output<string>();

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

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

output érték használata a tasks komponensben:

ng g c tasks

app.component.ts:

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

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

  get selectedUser() {
    return this.users.find((user) => user.id === this.selectedUserId)!;
  }

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

app.component.html

<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>

  <app-tasks [name]="selectedUser.name"/>
</main>

tasks.comonent.html

<h2> {{ name }}</h2>

tasks.component.ts

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

@Component({
  selector: 'app-tasks',
  standalone: true,
  imports: [],
  templateUrl: './tasks.component.html',
  styleUrl: './tasks.component.css'
})
export class TasksComponent {
  @Input ({ required: true }) name!: string;
}