If you're feeling a bit lost on this line of code, don't worry, let's break it down together.
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li>
Firstly, the *ngFor directive is responsible for generating a list of items based on the "heroes" array. This functionality is made possible through Angular's structural directives.
To simplify further, when we look closely at "*ngFor="let hero of heroes"," what it essentially means is that for each element in the heroes array, a new < li > tag is created. Within the context of this newly created < li > tag, a variable named "hero" is introduced to represent the corresponding element from the heroes array. It's worth noting that this "hero" variable is only valid within the scope of the specific < li > tag it belongs to.
Let's illustrate with an example: if we had an array like myNumArray = [1,5,7,8], and utilized a structure like this:
<li *ngFor="let num of myNumArray" (click)="console.log(num)">{{num}}</li>
The outcome would display:
1
5
7
8
Each instance of "num" within the < li > tags references the respective value from myNumArray, establishing a direct connection via the ngFor directive. Furthermore, every < li > tag responds to click events by logging its own unique number to the console. Clicking on 1 will log "1," clicking 5 will log "5," and so forth.
The ability to access the local variable "hero" within the same element where "ngFor" is invoked is due to Angular's template magic. The * symbol actually operates beyond the initial container and generates a template. For additional insights into leveraging * and ngFor effectively, refer to this resource: https://angular.io/guide/structural-directives#the-asterisk--prefix
I trust this breakdown has addressed your concerns and shed light on how individual "hero" entities are formulated distinctively within the setup.