Angular2 Change Detection - object vs string input property

Question

I wanted to extend the app from [Angular2's Tutorial][1] by having a grandchild component , power-select, called from the HeroDetailComponent:

  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div> 
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
        <power-select [(power)]="hero.power"></power-select>
      </div>
    </div>
  `,
  directives: [PowerSelectComponent],
  inputs: ['hero']

When I pass in the hero.power as an object, changes get reflected to the parent/grandparent.

http://plnkr.co/edit/UfMStWU5fEywvovpSIg1?p=preview

However if I try to pass hero.power as a string the changes do not get reflected unless I use an @Ouput eventemitter.

http://plnkr.co/edit/p9YcfGudIgSbGPp1xrlw?p=preview (provided by: zoechi)

The question is, why do I need the @Output eventemitter when I pass a string and not when I pass an object?

codecarbonara · Accepted Answer · 2019-08-08 10:03:59Z

5

The difference is that object properties are mutable while a string is not (like all other primitive types boolean, number, symbol, null, and undefined https://developer.mozilla.org/de/docs/Web/JavaScript/Datenstrukturen).

An object gets passes as reference, therefore your grandparent, parent, child (wherever you pass it) have a reference to the same object while a string is passed as copy.
If you pass a string around everyone gets a copy which is not related to the source at all (except that it has the same value).

You might argue that the property of the object is also a string. If the string property of the object is modified, a different string is set as value, but because nothing references the string directly but rather through the object reference, when they access the string property, they get the new value.

edited Aug 8, 2019 at 10:03

codecarbonara

285 bronze badges

answered Feb 14, 2016 at 16:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Change Detection - object vs string input property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related