Angular:9 How to change variable from another sibling component?

Question

I have a problem with updating string variable in Component1 where I change the value in Component2.

Components are independent of each other. Value in HTML template of Component1 doesn't update itself.

Is there a way to force template update? Beside that I tried: subscribe, @Input/@Output - but I might did that in wrong way. Beside that, I think that I can't include selector in template (comp2) because it would display html template from component2 in component1. I hope I'm wrong. Please, lead me out of my mistake.

illustrative image:

You both had right. Article helped me a lot ! Thank you very much. — Dawid Sieczka

Soham Soham · Accepted Answer · 2020-05-20T11:55:36

Take a look at Behavior Subject.

// RxJS v6+
import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

// two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

// two subscribers will get new value => output: 456, 456
subject.next(456);

// new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);

// all three subscribers will get new value => output: 789, 789, 789
subject.next(789);

// output: 123, 123, 456, 456, 456, 789, 789, 789

Angular:9 How to change variable from another sibling component?

2 Answers