Angular 2 - Tour of heroes: how object info is coming by only selecting <li>

0
votes

I am going through the documentation of angular 4 project "Tour of Heroes" https://angular.io/docs/ts/latest/tutorial/toh-pt2.html .

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li>

Here what is happening when I select any HERO the function onSelect() initiates and passes the particular "hero" object and then it assigns to the selectedHero to show that particular info using this functionality.

I want to know how that particular information about "hero" we are getting (so that we can pass it through onSelect() function) by only selecting that the HERO

1
javascriptangulartypescript
The doc explains it all here angular.io/tutorial/toh-pt2#selecting-a-hero – Nehal
this is to simple in this tutorial it self explained very well@user3526127 – R.Anandan
Could you please explain. I am new to Javascript and Angular. In the document it is given that "hero" object is passed but I want to know what is happening behind. I mean on selecting particular "li" we get "hero" object also... but how? – user3526127
Not sure if I fully understand your question, but (click) is a click event. This means that when you click on the html element the event is attached to, it fires the specified function. That element has the data for each hero because the *ngFor is referencing the existing heroes array which exists in the typescript. *ngFor is like a for loop, so hero here refers to each individual hero, which contains the data. This data is passed to onSelect when the element is clicked – jhhoff02
yes this is the thing I wanted to know... does that particular "li" contains data of individual hero? but in console I couldn't find that data if we get it through getQuerySelector. Could you please tell me how can we show that data in the console? – user3526127

1 Answers

0
votes

Not entirely sure where you are confused, but let's break down what this line is doing.

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li>

First of all, the *ngFor command creates a number of list elements equal to the length of the "heroes" array. This is done using Angular's structural directives.

In clearer steps, the *ngFor statement looks at this line "let hero of heroes." What this statement means is that for every variable in the array, heroes, a new < li > element is created. Then, within the scope of that created < li > element, it creates a variable "hero" which references the corresponding variable within the heroes array. This "hero" variable can be used and referenced only within that created < li > element.

For example, if you had an Array like this: myNumArray = [1,5,7,8], and you had a list like this

<li *ngFor="let num of myNumArray" (click)="console.log(num)">{{num}}</li>

It would print out

  • 1
  • 5
  • 7
  • 8

    • Because the "num" variable in each < li > element refers back to the respective variable of myNumArray that was assigned when the element was created suing the *ngFor. Additionally, each < li > element would have a click event that logs its instance of num to the console. Clicking on 1, would log "1," clicking on 5 would log "5," and so on.

    The reason you can refer to this local variable "hero" in the same element tag that the "ngFor" is called is because of some templating magic in Angular. the * symbol actually hops outside the element in which it was called and creates a template. You can read more about the utilization of * and ngFor here: https://angular.io/guide/structural-directives#the-asterisk--prefix

    Hopefully this answers your question and explains how each particular "hero" info is created, and how they are distinct from each other.