How to pass an updated variable to another component without reloading the component?

Question

I am not sure whether such question exists because I dont exactly know what the concept I am looking for is named by. So I have a shared-service:

// shared.service.ts
public showLoginForm: boolean = true;

In my app.component I use the variable from above as follows:

//app.component.ts
ngOnInit: void {
    this.showLoginForm = this.sharedSrv.showLoginForm;
}

Now, in my login.component I change the variable in my service without leaving the app.component view:

// login.component.ts
login(f: ngForm){
...

this.sharedSrv.showLoginForm = false;
}

How do I pass the new value of showLoginFormto the app component?

You need to use a BehaviorSubject to watch for changes to that service variable. You can then subscribe to those changes within your component. This is a good answer stackoverflow.com/questions/51545856/… — Nathan Beck
– Nathan Beck, Commented Sep 22, 2020 at 17:41

meblum · Accepted Answer · 2020-09-22 18:00:15Z

0

Make showLoginForm as an Observable stream something like shared.service.ts

    private showLoginFormSubject: BehaviorSubject<boolean>;

  constructor() {
    this.showLoginFormSubject = new BehaviorSubject(true);
  }

  setShowLoginForm(show: boolean) {

    this.showLoginFormSubject.next(show);
  }

  getShowLoginForm(): Observable<boolean> {
    return this.showLoginFormSubject.asObservable();
  }

now in the component: login.component.ts

this.sharedSrv.getShowLoginForm().subscribe(val=>this.showLoginForm=val);

to update the value:

this.sharedSrv.setShowLoginForm(false);

edited Sep 22, 2020 at 18:00

answered Sep 22, 2020 at 17:46

meblum

1,9741 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Opat Over a year ago

Now, I really understood how BehaviorSubject works!

meblum Over a year ago

There are a few typos in the code. will edit it now.

Collectives™ on Stack Overflow

How to pass an updated variable to another component without reloading the component?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related