Angular2 Notifying the template of a change

Question

Here is my code :

@Component({
    selector: "foo",
    template: `
      <span>Init : {{o.init}}</span>
      <span>Loaded data : {{o.loadedData}}</span>
    `,
    providers: [
        Services
    ]
})
export class FooComponent implements OnInit{
   constructor (private _services: Services) {}

   o: Object
   ngOnInit() {
      o = {"init": "foo"}
      this.services.randomCall()
          .subscribe(
              res => this.o["loadedData"] = res["loadedData"]  
          )
   }
}

So o.loadedData doesn't appear everytime due to a race condition between my randomCall() and the template rendering. What I would like would be to notify angular after having assigned o["loadedData"] = res["loadedData"]. In angular1, I would have done a call to the scope's digest() function.

How can I do something similar in angular2 ?

Thanks !

Edit: I added back this, it was a typo.

Thierry Templier · Accepted Answer · 2016-06-02T08:35:02.490

4

I would use the this keyword:

o: Object
ngOnInit() {
  this.o = {"init": "foo"}; // <-----

  this.services.randomCall()
      .subscribe(
          res => {
            this.o["loadedData"] = res["loadedData"]; // <-----
          }
      );
 }

Edit

You could force Angular2 to detect changes using the ChangeDetectorRef class, this way:

constructor(private cdr:ChangeDetectorRef) {
}

o: Object
ngOnInit() {
  this.o = {"init": "foo"};

  this.services.randomCall()
      .subscribe(
          res => {
            this.o["loadedData"] = res["loadedData"];
            this.cdr.detectChanges(); // <-----
          }
      );
 }

edited Jun 02 '16 at 08:35

answered Jun 02 '16 at 08:28

Thierry Templier

198,364
44
396
360

My bad, it was a typo in my stackoverflow case, not in my actual one. – Scipion Jun 02 '16 at 08:32
Okay no problem! You could leverage the `ChangeDetectorRef` class and its `detectChanges` method. Normally it's not necessary... – Thierry Templier Jun 02 '16 at 08:35
What is the content of the `randomCall` method? – Thierry Templier Jun 02 '16 at 08:36

score 2 · Answer 2 · edited May 23 '17 at 10:30

Normally this is done by Angulars change detection which gets notified by its zone that change detection should happen. When code that somehow runs outside Angulars zone modifies your model, then you can invoke change detection manually like

export class FooComponent implements OnInit{
   constructor (private _services: Services, private cdRef:ChangeDetectorRef) {}

   o: Object
   ngOnInit() {
      o = {"init": "foo"}
      this.services.randomCall()
          .subscribe(
              res => {
                  o["loadedData"] = res["loadedData"];
                  this.cdRef.detectChanges();
              });
          )
   }
}

Because of the missing this as mentioned by Thierry, manual change detection won't help you in this case anyway.

For more options how to invoke change detection see Triggering Angular2 change detection manually

Angular2 Notifying the template of a change

2 Answers2