Angular 6 View is not updated after changing a variable within subscribe : <p>Why is the view not being updated when a variable changes within a subscribe?</p>

<p>I have this code:</p>

<p><strong>example.component.ts</strong></p>

<pre><code>testVariable: string;

ngOnInit() {
    this.testVariable = 'foo';

    this.someService.someObservable.subscribe(
        () =&gt; console.log('success'),
        (error) =&gt; console.log('error', error),
        () =&gt; {
            this.testVariable += '-bar';

            console.log('completed', this.testVariable);
            // prints: foo-Hello-bar
        }
    );

    this.testVariable += '-Hello';
}
</code></pre>

<p><strong>example.component.html</strong></p>

<pre><code>{{testVariable}}
</code></pre>

<p>But the view displays: <em>foo-Hello</em>.</p>

<p>Why won't it display: <em>foo-Hello-bar</em>?</p>

<p>If I call <code>ChangeDetectorRef.detectChanges()</code> within the subscribe it will display the proper value, but why do I have to do this?</p>

<p>I shouldn't be calling this method from every subscribe, or, at all (angular should handle this). Is there a right way?</p>

<p>Did I miss something in the update from Angular/rxjs 5 to 6?</p>

<p>Right now I have Angular version 6.0.2 and rxjs 6.0.0. The same code works ok in Angular 5.2 and rxjs 5.5.10 without the need of calling <code>detectChanges</code>.</p>
