Angular 2, change another component's view from unrelated component
<p>I'm able to change the value of a component's variable from another component as <code>console.log()</code> shows in this example.</p>

<p>My problem is that second component's view does not refresh despite the variable change.</p>

<p>Example:</p>

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

<pre><code>import {Component} from '@angular/core';
import {SecondComponent} from './second.component';

@Component({
    selector: 'first',
    template: `
        &lt;h2&gt;First component&lt;/h2&gt;
        &lt;button (click)="changeOutside()"&gt;Change&lt;/button&gt;
    `,
    providers: [SecondComponent]
})
export class FirstComponent {
    constructor(private otherComponent: SecondComponent) {}
    changeOutside() {
        this.otherComponent.change();
    }
}
</code></pre>

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

<pre><code>import {Component} from '@angular/core';

@Component({
    selector: 'second',
    template: `
        &lt;h2&gt;Second component&lt;/h2&gt;
        &lt;div&gt;Pet: {{animal}}&lt;/div&gt;
        &lt;button (click)="change()"&gt;Change&lt;/button&gt;
    `
})
export class SecondComponent {
    animal: string = 'Dog';
    change() {
        this.animal = 'Cat';
        console.log(this.animal);
    }
}
</code></pre>

<p>Both components are totally <strong>unrelated</strong> from different branches of the DOM tree.</p>

<p>I've also tried with the first component emitting an event and the second component subscribing to it with the same result, the variable changes but view does not update.</p>

<hr>

<p>After <a href="https://stackoverflow.com/a/39722966/5626903">Günter's suggestion</a> (thanks), I've tried with the next solution with no success. Even the <code>console.log</code> is not working.</p>

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

<pre><code>import {Component} from '@angular/core';
import {UpdateService} from './update.service';

@Component({
    selector: 'first',
    template: `
        &lt;h2&gt;First component&lt;/h2&gt;
        &lt;button (click)="changeOutside()"&gt;Change&lt;/button&gt;
    `
})
export class FirstComponent {
    constructor(private updateService: UpdateService) {}
    changeOutside() {
        this.updateService.changeAnimal('Cat');
    }
}
</code></pre>

<p><strong>update.service.ts</strong></p>

<pre><code>import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class UpdateService {
    // Observable string sources
    private newAnimalSource = new Subject&lt;string&gt;();
    // Observable string streams
    newAnimal$ = this.newAnimalSource.asObservable();

    changeAnimal(animal: string) {
        this.newAnimalSource.next(animal);
    }
}
</code></pre>

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

<pre><code>import {Component} from '@angular/core';
import {UpdateService} from './update.service';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';

@Component({
    selector: 'second',
    template: `
        &lt;h2&gt;Second component&lt;/h2&gt;
        &lt;div&gt;Pet: {{animal}}&lt;/div&gt;
        &lt;button (click)="change()"&gt;Change&lt;/button&gt;
    `
})
export class SecondComponent {
    animal: string = 'Dog';
    subscription: Subscription;
    constructor(private updateService: UpdateService) {
        this.subscription = updateService.newAnimal$.subscribe(
            animal =&gt; {
                console.log(animal);
                this.animal = animal;
        });
    }
    change() {
        this.animal = 'Cat';
    }
}
</code></pre>

<hr>

<h2>Solved</h2>

<p>Finally, the solution proposed by <strong>Günter</strong> worked after adding <code>UpdateService</code> as a <code>provider</code> in the <code>@NgModule</code> of <code>app.module.ts</code></p>