Is there a way to transfer an updated variable to a different component without causing the component to reload?

I'm unsure if such a query exists because I am not entirely certain of the terminology related to the concept I am seeking. Here's the scenario: I have a shared service with the following property:

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

In my app component, I utilize this property as shown below:

// app.component.ts
ngOnInit() {
    this.showLoginForm = this.sharedSrv.showLoginForm;
}

Now, in my login component, I update the value of this property within the service without navigating away from the app component view:

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

this.sharedSrv.showLoginForm = false;
}

How can I pass the updated value of showLoginForm back to the app component?

angulartypescriptauthenticationservice

Answer №1

Transform the `showLoginForm` function into an Observable stream similar to how it's done in `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 change the value:

this.sharedSrv.setShowLoginForm(false);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Angular RxJs BehaviorSubject not updating correctly

I've encountered an issue while attempting to share a string value between sibling components (light-switch and navbar). The problem lies in the fact that the property themeColor fails to update when I emit a new value from my DataService. Below is t ...

angulartypescriptrxjs

Differentiating Typescript will discard attributes that do not adhere to an Interface

Currently, I am working with an API controller that requires a body parameter as shown below: insertUser(@Body() user: IUser) {} The problem I'm facing is that I can submit an object that includes additional properties not specified in the IUser int ...

javascripttypescript

Tips for correctly implementing an authorize function in TypeScript with NextAuth.js

Trying to implement the Credentials Provider in NextJs ("next": "^12.0.7") and NextAuth ("next-auth": "^4.1.2") using TypeScript has been a challenge. I am encountering difficulties in getting the function to work co ...

typescriptnext.jsnext-auth

The button will be disabled if any cells in the schedule are left unchecked

I am seeking help on how to dynamically disable the save button when all checkboxes are unchecked. Additionally, I need assistance with enabling the save button if at least one hour is selected in the schedule. Below is my code snippet for reference: htt ...

javascriptangulartypescript

Best practices for correctly parsing a date in UTC format using the date-fns library

My log file contains timestamps in a non-ISO format: 2020-12-03 08:30:00 2020-12-03 08:40:00 ... The timestamps are in UTC, as per the log provider's documentation. I am attempting to parse them using date-fns: const toParse = "2020-12-03 08:40 ...

javascripttypescriptdatetimezonedate-fns

Can someone explain the meaning of this syntax in a TypeScript interface?

Just the other day, I was trying to incorporate the observer pattern into my Angular 4 application and came across this TypeScript code snippet. Unfortunately, I'm not quite sure what it means. Here's the code: module Patterns.Interfaces { ...

angulartypescript

Leveraging Typescript's robust type system to develop highly specific filter functions

I'm attempting to utilize the robust TypeScript type system in order to construct a highly typed 'filter' function that works on a collection (not just a simple array). Below is an illustration of what I am striving for: type ClassNames = &a ...

typescripttypescript-generics

Detecting changes in an object property that is bound to another object property - a comprehensive guide

In my application, I am facing a challenge with displaying navigation items based on user rules. This is how I have tried to implement it: I define an object with the necessary rules: rules: { canSeeProfile: true, canSeeAdminZone: false, ... ...

angularangular5

The object may be null even after being enclosed in an if statement

In my Vue component, I have implemented the following method: dataURLtoBlob(dataurl: string): Blob { const arr: string[] = dataurl.split(","); if (arr) { if (arr[0]) { const mime = arr[0].match(/:(.*?);/)[1]; ...

typescriptvue.js

Tips for setting an argument with a promise data type

I am currently working on writing unit tests using jest to test two functions in a separate file called generator, where I generate fake data : generator.ts export async function generateReportData(overide = {}) { return { clientId: faker.data ...

node.jstypescriptexpressunit-testingjestjs

How can I set up the default keyboard control for Google's Model Viewer?

Trying to enhance accessibility, I am working on enabling the camera orbit of my model viewer using arrow keys immediately after dismissing the poster. The challenge is that currently, I can only control the camera with arrow keys after interacting with th ...

javascripttypescriptthree.jsmodel-viewer

issue concerning Angular and Firebase Cloud Messaging

While working on Angular and Firebase Cloud Messaging, I encountered an error after following a specific example closely. Can someone provide assistance with resolving this issue? Here is the link to the example for reference: https://medium.com/@a.adendra ...

angularfirebase

Error encountered when running Angular 11 with SSR using @nguniversal/express-engine: "ReferenceError: globalThis is not defined"

Encountering issues while attempting to integrate @angular/fire with Angular 11 and @nguniversal/express-engine for server-side rendering (SSR). Upon initializing AngularFireModule in app.module.ts, errors arise when running the commands npm run dev:ssr or ...

angularfirebaseangularfire2

Find what you're looking for by exploring the search results inside the text box marked

update1: Appreciate your response! However, I am facing an issue where typing 'h' displays a set of values. When selecting a value, it should appear in the text box with a cross symbol, similar to how tags are edited on StackOverflow. I am work ...

javascripthtmlcssangularrxjs

Is there a way to transfer data between components in Angular 2+ without relying on a traditional "Parent-Child" relationship?

I am really interested in discussing the topic of passing data dynamically from one component to another. I am aware that this can be achieved using the "@Input()" decorator, however it does come with its drawbacks. For example, the inability to use the ba ...

angulartypescript

Guide to dynamically setting the index element with ngFor in Angular

When working with NgFor in Angular, I am interested in dynamically handling attributes using an index. I have a collection of properties/interfaces that look like this: vehicle1_Name, vehicle2_Name, vehicle3_Name vehicle4_Name, totalVehCount To achieve t ...

angulartypescriptfor-loopngforangular10

Utilizing Typescript to extract type information from both keys and values of an object

I have a unique challenge of mapping two sets of string values from one constant object to another. The goal is to generate two distinct types: one for keys and one for values. const KeyToVal = { MyKey1: 'myValue1', MyKey2: 'myValue ...

typescripttypescript-typings

Ways to grant access beyond the local host

I am having trouble accessing my Angular2 application outside of localhost. I can easily navigate to localhost:3030/panel, but when I try to use my IP address like 10.123.14.12:3030/panel/, it does not work. Can someone please help me fix this issue? I am ...

angulartypescriptng-build

Experiencing difficulties with PrimeNg installation on Angular 12.1.4 due to an npm error

I'm facing an issue while trying to integrate PrimeNG into my project. I encountered a strange error and I'm unsure about how to resolve it. Can anyone offer some assistance? The Angular version currently installed on my machine is 12.1.4. 205-18 ...

angularnpmprimeng

Unable to generate or compose a text document within my Ionic application

After attempting to create a file and write in it, I'm encountering an issue where the file appears to be created but is not visible when navigating to the folder. Can someone please point out what might be going wrong? Below is my code snippet: th ...

typescriptionic4