More dinamic components

app.component.html:

<main>
  <ul id="users">
    <li>
      <app-user />
    </li>
    <li>
      <app-user />
    </li>
    <li>
      <app-user />
    </li>
    <li>
      <app-user />
    </li>
  </ul>
</main>

app.component.ts-hez hozzáadjuk a DUMMY_USERS tömböt:

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

Ujrahasználjuk a user componenst kulonbozo adatokkal:

<main>
  <ul id="users">
    <li>
      <app-user [avatar]="users[0].avatar"/>
    </li>
    <li>
      <app-user [avatar]="users[1].avatar"/>
    </li>
    <li>
      <app-user [avatar]="users[2].avatar"/>
    </li>
    <li>
      <app-user [avatar]="users[3].avatar"/>
    </li>
  </ul>
</main>

@Input dekoratort adunk hozzá, ezzel megmondjuk hogy beállítható kívülről
user.component.ts:

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

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

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

  onSelectUser() {}
}

app.component.html:

<main>
  <ul id="users">
    <li>
      <app-user [avatar]="users[0].avatar" [name]="users[0].name"/>
    </li>
    <li>
      <app-user [avatar]="users[1].avatar" [name]="users[1].name"/>
    </li>
    <li>
      <app-user [avatar]="users[2].avatar" [name]="users[2].name"/>
    </li>
    <li>
      <app-user [avatar]="users[3].avatar" [name]="users[3].name"/>
    </li>
  </ul>
</main>

user.component.html:

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

a user.component.ts-ben nem szol a fordito a ! jel miatt hogy ha nincs kitoltve az ertek akkor hiba lesz, ha app.component.html-ben pl ha nem adunk erteket akkor hiba lesz ami csak annyi hogy nem jelenik meg nev, de nincs hibauzenet:

<main>
  <ul id="users">
    <li>
      <app-user [avatar]="users[0].avatar" [name]="users[0].name"/>
    </li>
    <li>
      <app-user [avatar]="users[1].avatar" [name]="users[1].name"/>
    </li>
    <li>
      <app-user [avatar]="users[2].avatar"
    </li>
    <li>
      <app-user [avatar]="users[3].avatar" [name]="users[3].name"/>
    </li>
  </ul>
</main>

megadhato hogy ez a property kotelezo legyen:

  @Input({required: true}) avatar!: string;
  @Input({required: true}) name!: string;