2

On the code below, as you can see, I subscribe to an observable and on the callback I set status to the value of result. This is used on an *ngIf on the view. Fact is, even when true is returned, the view is not updated.

  export class AppComponent {

  private status;

  constructor (private proxyService: ProxyService) {

  }

  ngOnInit(){
    //setInterval(()=>console.log(this.isInjected),1000);
    this.proxyService.someObservable.subscribe((result)=>{
      this.status = result;
      console.log(result);
    });
  }

}

Now, you might notice the commented line. While debugging I added it, and the weird thing is it makes the view update. Any ideas why?

For reference, that is my view:

  <div *ngIf="status">
    <app-userlane-inject></app-userlane-inject>
  </div>
  <div *ngIf="!status">
    <span>Status is false.</span>
  </div>
{{status}}

The child component is never rendered, and the string interpolation remains false even when console logs true (except if the interval is there, then it works).

Here is what the service does in broad terms:

var mySubject= new BehaviorSubject(false);


@Injectable()
export class ProxyService {
  public someObservable= mySubject.asObservable();


//Kinda deep callback tree, then finally
  mySubject.next(true)

}

Just some extra info to put answers into context: the deep callback chain I mentioned above goes completely out of angular (this was an extension, and the call chain included sending a message to the content script, then to the page, and all the way back). That is why angular zone needs to be called into action again. I didn't know that was the cause, and that is why I didn't include that on my initial question.

14
  • You don't need var me = this;. Just use this.status = result; Commented Feb 14, 2017 at 12:37
  • 1
    What is ProxyService? Can you share some code? Commented Feb 14, 2017 at 12:38
  • What is the output from console.log(result); Commented Feb 14, 2017 at 12:40
  • Output is true, that's the thing
    – RSinohara
    Commented Feb 14, 2017 at 12:41
  • 1
    That's handy @jason.kaisersmith, thanks. That's what I was trying to do when I added the interval console log, but that FIXED the problem lol. Probably a ngZone thing, which I don't know anything about.
    – RSinohara
    Commented Feb 14, 2017 at 12:49

2 Answers 2

2

I think that if you initialize mySubject outside the class, it will run outside Angulars zone, which will prevent Angular to recognize events and therefore won't run change detection.

@Injectable()
export class ProxyService {
  private mySubject= new BehaviorSubject(false);
  public someObservable= this.mySubject.asObservable();


//Kinda deep callback tree, then finally
  this.mySubject.next(true)
}

update

You can use

  constructor(private zone:NgZone) {}
  this.zone.run(()=> this.mySubject.next(true));

but if this solves your problem there is probably something wrong in the call chain where some event or callback is not happening inside Angulars zone.

4
  • Just tried this, it makes sense. But no fix. Maybe my callback tree takes execution away from ngZone (it definitely might)? I'll try ngZone.run.
    – RSinohara
    Commented Feb 14, 2017 at 13:24
  • this.ngZone.run(()=>this.isInjected = result); Solved it. So it's not the observable, it was the call tree before .next taking it away from the zone. Your answer led me to it, if you update with the fix, I'll accept it. Thanks.
    – RSinohara
    Commented Feb 14, 2017 at 13:31
  • I updated my answer. You you locate where the root cause was? Commented Feb 14, 2017 at 14:49
  • 1
    Well yes... That call goes to content script via tabs.sendMessage, then to the page via dom event, then back the same path... so not surprised that it leaves the zone. That solution worked, and is a must know for extension development.
    – RSinohara
    Commented Feb 14, 2017 at 17:05
0

The best way to display observables is to create a dumb components to display them.

Example:

If this.status is an observable

Create a dumb component to display it.

//dumb component to display status

   @Component({
      selector: 'dumb-display-comp',
      template: '{{ status }}'  
    })
    export class DumbDisplayComp {
        @Input() status: any;
    }

Now use you dumb component in the parent component and send as input the observable with the async pipe.

Your parent template using the dumb component

<dumb-display-comp [status]="status | async" ></dumb-display-comp>

Your app should be filled with dumb components to declutter your main ones. Just my two cents.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.