property binding

create user component:

ng g c user

app.component.html:

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

user.component.html:

<div>
  <button>
    <img src="{{ selectedUser.avatar }}"/>
    <span>{{ selectedUser.name }}</span>
  </button>
</div>

ugyanez property bindinggal:

<div>
  <button>
    <img [src]="selectedUser.avatar"/>
    <span>{{ selectedUser.name }}</span>
  </button>
</div>

kiegészítve path-el:

<div>
  <button>
    <img [src]="'assets/users/' + selectedUser.avatar"/>
    <span>{{ selectedUser.name }}</span>
  </button>
</div>

Lehet írni a template-be javascript kifejezést is:

<div>
  <button>
    <span>{{ 1 + 1 }}</span>
  </button>
</div>

<alt> tag hozzáadása:

<div>
  <button>
    <img [src]="'assets/users/' + selectedUser.avatar"
    	[alt]="selectedUser.name"
    />
    <span>{{ selectedUser.name }}</span>
  </button>
</div>

Az imagePath-t atrakhatjuk a user componensbe és ott hozhatjuk létre:
Getter: (használható mint property, nem kell zárójel!)

export class UserComponent {
  selectedUser = DUMMY_USERS[randomIndex];

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

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