Angular Tutorial: Tour of Heroes lesson 2: data binding to hero from selectedHero

Question

In Angular tutorial lesson 2 on https://embed.plnkr.co/?show=preview

I can see in HeroComponent template, [(ngModel)] is 2-way binding the selectedHero.name as the input value changes. How come it's binding and changing {{hero.name}} 1-way interpolation on the heroes list above at the same time? Should have made sense if it was {{selectedHero.name}} interpolation on the list, right?

Can someone please explain to me what basic logic I'm missing out?

Thanks in advance.

Answer 1

if i understand your question: onSelect(hero: Hero): void { this.selectedHero = hero; }

with this instruction the hero: Hero is a pointer to the Element of type Hero.

this.selectedHero = hero is giving the same pointer to selectedHero, so they are 2 pointers to the same obj. This is why on the change of value they are changing both.