I am new to event binding, and I cannot understand why and how a value is passed in () and its value is loaded. I am following Angular tutorial which part
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
where
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
I cannot understand where did the (hero) came from and know how to load which data
The hero object came from the *ngFor="let hero of heroes".
ngFor directive: is a way of repeating a template by using each item of an iterable as that template's context.
Every loop of heroes will use a specific hero object and will create a li element that will bind an onClick event using (click)="onSelect(hero)".
As you can see, onSelect method was declared in your component as onSelect(hero: Hero): void this declaration allows you to use it in any place within the component's selector.
On the other hand, heroes object is an Array of type hero and will be loaded previously within your component.
Probably, that Array was loaded calling a specific service to load heroes and it's one of the first thing that every component must do for loading the necessary data that will be rendered.
In component HeroesComponent the data regarding heroes was declared as follow:
heroes = HEROES;
In that tutorial, the heroes data is provided by this file mock-heroes.ts and its content is the following:
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
Based on this code I can assume that this component is implemented in a class that has an array called heroes. Most likely in your component's template there is a list, e.g. <ul>. The *ngFor directive iterates through the array heroes and creates one <li> element for each array element. The variable hero is just used to iterate through the array and you could have named it anything.
After the loop is complete, each <li>'s value is one instance of Hero from the array, and each <li> has a click listener. When you click on a list element (<li>), the method onClick is invoked passing whatever hero instance was assigned to this list element during the loop.
